mirror of
https://github.com/servo/servo.git
synced 2025-08-08 23:15:33 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: CSS Transform using 2d rotate()</title>
|
||||
<link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="match" href="2d-rotate-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="asserting that you can rotate an element with CSS">
|
||||
<style type="text/css">
|
||||
article, svg{
|
||||
position: absolute;
|
||||
top: 220px;
|
||||
left: 60px;
|
||||
}
|
||||
article{
|
||||
border: 10px solid green;
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
z-index: 2;
|
||||
}
|
||||
section article{
|
||||
transform: rotate(30deg);
|
||||
transform-origin: 19% 197%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should only see one block with color green, and you should not see any red</p>
|
||||
<section>
|
||||
<article></article>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
|
||||
<style type="text/css">
|
||||
rect{
|
||||
stroke-width: 10;
|
||||
stroke: red;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
<rect height="110" width="110" y="-38" x="120" transform="rotate(30)" />
|
||||
</svg>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS test: Rotate via javascript must show the correct computed rotation</title>
|
||||
<link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Asserting that you can rotate an element with JS and it show up in CSS computed values not as a matrix but as the rotation">
|
||||
<style>
|
||||
#box{
|
||||
margin-top:30px;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Rotate via JS</h1>
|
||||
<div id="log"></div>
|
||||
<div id="box"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
var box = document.getElementById("box");
|
||||
box.style.transform = "rotate(30deg)";
|
||||
assert_equals(window.getComputedStyle(box).getPropertyValue("transform"),
|
||||
"rotate(30deg)");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: CSS Transform using 2d rotate()</title>
|
||||
<link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs">
|
||||
<link rel="mismatch" href="2d-rotate-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
article, svg{
|
||||
position: absolute;
|
||||
top: 220px;
|
||||
left: 60px;
|
||||
}
|
||||
article{
|
||||
border: 10px solid green;
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
z-index: 2;
|
||||
cursor:pointer;
|
||||
}
|
||||
section article{
|
||||
transform: rotate(30deg);
|
||||
transform-origin: 19% 197%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should only see one block with color green, and you should not see any red</p>
|
||||
<section>
|
||||
<article></article>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
|
||||
<style type="text/css">
|
||||
rect{
|
||||
stroke-width: 10;
|
||||
stroke: red;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
<rect transform="FAIL_ME(30)" height="110" width="110" y="-38" x="120"/>
|
||||
</svg>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: CSS Transform using 2d rotate()</title>
|
||||
<link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs">
|
||||
<link rel="mismatch" href="2d-rotate-notref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
svg{
|
||||
position: absolute;
|
||||
top: 220px;
|
||||
left: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should only see one block with color green, and you should not see any red</p>
|
||||
<section>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
|
||||
<style type="text/css">
|
||||
rect{
|
||||
stroke-width: 10;
|
||||
stroke: green;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
<rect height="110" width="110" y="-38" x="120" transform="rotate(30)"/>
|
||||
</svg>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
7
tests/wpt/web-platform-tests/css/css-transforms-1/OWNERS
Normal file
7
tests/wpt/web-platform-tests/css/css-transforms-1/OWNERS
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@dbaron
|
||||
@chunywang
|
||||
@plinss
|
||||
@minxhuang
|
||||
@dirkschulze
|
||||
@hober
|
||||
@grorg
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with backface visibility = hidden</title>
|
||||
<link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#propdef-backface-visibility">
|
||||
<link rel="match" href="reference/backface-visibility-hidden-ref.html">
|
||||
<meta name="assert" content="When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer.">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.redSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
z-index: 1;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.face {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
perspective: 1000;
|
||||
transform: rotateY(45deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green retangle and no red.</p>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="redSquare face"></div>
|
||||
<div class="greenSquare face"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: 2D rotation with 3D rotation</title>
|
||||
<link rel="author" title="Philip Rogers" href="mailto:pdr@google.com">
|
||||
<link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com" /> <!-- 2012-06-16 -->
|
||||
<style type="text/css">
|
||||
.greenSquareRef {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="greenSquareRef"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: 2D rotation with 3D rotation</title>
|
||||
<link rel="author" title="Philip Rogers" href="mailto:pdr@google.com">
|
||||
<link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com" /> <!-- 2012-06-16 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="css-rotate-2d-3d-001-ref.html">
|
||||
<meta name="assert" content="This transform rotates a tall rectangle by 90 degrees then applies a 3D rotation in the X axis.">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
transform: rotate(90deg) rotate3d(1, 0, 0, 60deg);
|
||||
}
|
||||
.redSquare {
|
||||
position: absolute;
|
||||
top: 101px;
|
||||
left: 101px;
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="redSquare"></div>
|
||||
<div class="greenSquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: scale 0 on a parent with a child</title>
|
||||
<link rel="author" title="Amol Shanbhag" href="mailto:amolvshanbhag@yahoo.com">
|
||||
<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<meta name="assert" content="Child square element is transformed (scaled to zero) along with the parent element">
|
||||
<link rel="match" href="reference/css-scale-nested-ref.html">
|
||||
<style type="text/css">
|
||||
div{
|
||||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
.parentredSquare {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
transform: scale(0);
|
||||
}
|
||||
.childredSquare {
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: red;
|
||||
}
|
||||
p{
|
||||
padding-top: 130px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="greenSquare"></div>
|
||||
<div class="parentredSquare"><div class="childredSquare"></div></div>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Test Reference: skew function part 1</title>
|
||||
<link rel="author" title="Adrien Pachkoff" href="mailto:adrien@pachkoff.com">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
top:0;
|
||||
left:0;
|
||||
position:absolute;
|
||||
height: 268.778px;
|
||||
width: 231.642px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green quadrilateral and no red.</p>
|
||||
<svg>
|
||||
<path d="M 231.64212,268.77841 73.167806,158.54816 0,0 158.58452,110.15942 z" fill="green" />
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Test: skew function part 1</title>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="author" title="Adrien Pachkoff" href="mailto:adrien@pachkoff.com">
|
||||
<link rel="match" href="css-skew-001-ref.html">
|
||||
<style type="text/css">
|
||||
div {
|
||||
top:5px;
|
||||
left:5px;
|
||||
position:absolute;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
background-color:red;
|
||||
transform-origin: 0 0;
|
||||
transform: skew(25deg, 35deg);
|
||||
}
|
||||
svg {
|
||||
top:0;
|
||||
left:0;
|
||||
position:absolute;
|
||||
height: 268.778px;
|
||||
width: 231.642px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green quadrilateral and no red.</p>
|
||||
<div> </div>
|
||||
<svg>
|
||||
<path
|
||||
d="M 231.64212,268.77841 73.167806,158.54816 0,0 158.58452,110.15942 z"
|
||||
fill="green" />
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Test Reference: skew function part 2</title>
|
||||
<link rel="author" title="Adrien Pachkoff" href="mailto:adrien@pachkoff.com">
|
||||
<style type="text/css">
|
||||
div {
|
||||
top:0px;
|
||||
left:0px;
|
||||
position:absolute;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
background-color:green;
|
||||
transform-origin: 0 0;
|
||||
transform: skew(25deg, 35deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green quadrilateral and no red.</p>
|
||||
<div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Test: skew function part 2</title>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="author" title="Adrien Pachkoff" href="mailto:adrien@pachkoff.com">
|
||||
<link rel="match" href="css-skew-002-ref.html">
|
||||
<style type="text/css">
|
||||
div {
|
||||
top:0px;
|
||||
left:0px;
|
||||
position:absolute;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
background-color:green;
|
||||
transform-origin: 0 0;
|
||||
transform: skew(25deg, 35deg);
|
||||
}
|
||||
svg {
|
||||
top:5px;
|
||||
left:5px;
|
||||
position:absolute;
|
||||
height: 253.667px;
|
||||
width: 218.333px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green quadrilateral and no red.</p>
|
||||
<svg>
|
||||
<path
|
||||
d="M 211.84314,245.80529 66.913984,144.99668 0,0 145.02994,100.74384 z" fill="red" />
|
||||
</svg>
|
||||
<div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotate3d on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate the 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotate3d(1,0,0,-60deg);
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square with black border around, and no any red.</p>
|
||||
<div class="redsquare"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotate3d on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotate3d(1,0,0,60deg);
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square with black border around, and no any red.</p>
|
||||
<div class="redsquare"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotate3d on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotate3d(0,1,0,-60deg);
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square with black border around, and no any red.</p>
|
||||
<div class="redsquare"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotate3d on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotate3d(0,1,0,60deg);
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square with black border around, and no any red.</p>
|
||||
<div class="redsquare"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotate3d on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateZ-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotate3d(0,0,1,-90deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square and no red.</p>
|
||||
<div class="origin"></div>
|
||||
<div class="redsquare"></div>
|
||||
<div class="greensquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotate3d on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateZ-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a vertical rectangle for 90 degree on Z-axis would cover the horizontal red rectangle.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotate3d(0,0,1,90deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square and no red.</p>
|
||||
<div class="origin"></div>
|
||||
<div class="redsquare"></div>
|
||||
<div class="greensquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotateX on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on X-axis for -60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotateX(-60deg);
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square with black border around, and no any red.</p>
|
||||
<div class="redsquare"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotateX on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotateX(60deg);
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square with black border around, and no any red.</p>
|
||||
<div class="redsquare"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotateY on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for -60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotateY(-60deg);
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square with black border around, and no any red.</p>
|
||||
<div class="redsquare"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotateY on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotateY(60deg);
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square with black border around, and no any red.</p>
|
||||
<div class="redsquare"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotate3d on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateZ-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square and no red.</p>
|
||||
<div class="origin"></div>
|
||||
<div class="redsquare"></div>
|
||||
<div class="greensquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotate3d on div element</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-rotateZ-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate a vertical rectangle for 90 degree on Z-axis will cover the horizontal red rectangle.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square and no red.</p>
|
||||
<div class="origin"></div>
|
||||
<div class="redsquare"></div>
|
||||
<div class="greensquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: rotateY with transform-style on nested elements</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-style-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
|
||||
<link rel="match" href="reference/css-transform-3d-transform-style-ref.html">
|
||||
<meta name="assert" content="Test checks that rotate the nested div with transform-style preserve-3d, rotated parent div for -60 degree on Y-axis then and rotated child div for 120 degree, at this time the parent and child should have equal width, then child div could cover the red box.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.container {
|
||||
height: 100px;
|
||||
top: 60px;
|
||||
width: 400px;
|
||||
}
|
||||
div.blue {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
transform: rotateY(-60deg);
|
||||
transform-style: preserve-3d;
|
||||
width: 400px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
transform: rotateY(120deg);
|
||||
width: 400px;
|
||||
}
|
||||
div.red{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
left: 100px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <b>green</b> square and a <b>blue</b> square, and no any <b>red</b>.</p>
|
||||
<div class="container">
|
||||
<div class="red"></div>
|
||||
<div class="blue">
|
||||
<div class="green"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: CSS transforms rotate inheritance on div element</title>
|
||||
<link rel="author" title="Delong Gao" href="mailto:gaodl@uw.edu">
|
||||
<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<!--<link rel="match" href="reference/ttwf-reftest-tutorial-ref.html">
|
||||
<meta name="flags" content="svg">-->
|
||||
<meta name="assert" content="Rotation on parent element will not be inherited by child element, unless declared. The test is passed if there is a green square and no red. And it is rotated 45 degree.">
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.flag {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
z-index: 2;
|
||||
}/*This div is used to show the red square*/
|
||||
.parentSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform: rotate(45deg);
|
||||
background-color: green;
|
||||
}
|
||||
.childSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
transform: inherit;/*While inherited, the child div should rotate 90 degree instead of 45*/
|
||||
}
|
||||
p {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red. And it is rotated 45 degree.</p>
|
||||
<div class="flag"></div>
|
||||
<div class="parentSquare">
|
||||
<div class="childSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: CSS transforms scale 2 inheritance on div elements</title>
|
||||
<link rel="author" title="Delong Gao" href="mailto:gaodl@uw.edu">
|
||||
<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<!--<link rel="match" href="reference/ttwf-reftest-tutorial-ref.html">
|
||||
<meta name="flags" content="svg">-->
|
||||
<meta name="assert" content="While child div inherits property from its parent, scaling 2 on parent div will course the child to scale 4 and totally cover the red div. The test passes if there is a green square and no red. ">
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
}
|
||||
.parent {
|
||||
background: yellow;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
left: 75px;
|
||||
transform: scale(2);
|
||||
|
||||
}
|
||||
.child {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
transform: inherit;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red. </p>
|
||||
<div class="red"></div>
|
||||
<div class="parent">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: property existence</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#propdef-transform">
|
||||
<meta name="flags" content="dom">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
assert_not_equals(document.getElementById("test").style.transfor, undefined, "expect transform is not undefined");
|
||||
}, "Check the existence of transform.");
|
||||
|
||||
test(function() {
|
||||
assert_own_property(document.getElementById("test").style, "transform-origin", "expect transform-origin");
|
||||
}, "Check the existence of transform-origin.");
|
||||
|
||||
test(function() {
|
||||
assert_own_property(document.getElementById("test").style, "transform-style", "expect transform-style");
|
||||
}, "Check the existence of transform-style.");
|
||||
|
||||
test(function() {
|
||||
assert_own_property(document.getElementById("test").style, "perspective", "expect perspective");
|
||||
}, "Check the existence of perspective.");
|
||||
|
||||
test(function() {
|
||||
assert_own_property(document.getElementById("test").style, "perspective-origin", "expect perspective-origin");
|
||||
}, "Check the existence of perspective-origin.");
|
||||
|
||||
test(function() {
|
||||
assert_own_property(document.getElementById("test").style, "backface-visibility", "expect backface-visibility");
|
||||
}, "Check the existence of backface-visibility.");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with scale function on hover state</title>
|
||||
<link rel="author" title="Chris Sanborn" href="mailto:granimalcracker@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-functions">
|
||||
<!-- See also: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:hover -->
|
||||
<link rel="match" href="reference/css-transform-scale-ref-001.html">
|
||||
<meta name="assert" content="When the element is hovered over, the transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner.">
|
||||
<meta name="flag" content="interactive">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.greenSquare:hover {
|
||||
transform-origin: 0 0;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
/* This div should only be visible if the test fails */
|
||||
.redSquare {
|
||||
position: absolute;
|
||||
/* It is approximately the same size as the test div, but with a 1px margin */
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
background-color: red;
|
||||
left: 100px;
|
||||
top :100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you hover over the green square and it completely covers the red square.</p>
|
||||
<div class="container">
|
||||
<!-- This is the square that should not be visible if the test passes -->
|
||||
<div class="redSquare"></div>
|
||||
<!-- This is the square being tested with the transform -->
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with scale function and move its origin</title>
|
||||
<link rel="author" title="Chris Sanborn" href="mailto:granimalcracker@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-functions">
|
||||
<link rel="match" href="reference/css-transform-scale-ref-002.html">
|
||||
<meta name="assert" content="The transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
transform-origin: 0 0;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
|
||||
/* This div should only be visible if the test fails */
|
||||
.redSquare {
|
||||
position: absolute;
|
||||
/* It is approximately the same size as the test div, but with a 1px margin */
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
background-color: red;
|
||||
left: 100px;
|
||||
top :100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if the green square completely covers the red square.</p>
|
||||
<div class="container">
|
||||
<!-- This is the square that should not be visible if the test passes -->
|
||||
<div class="redSquare"></div>
|
||||
<!-- This is the square being tested with the transform -->
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms Test: property</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<meta name="flags" content="dom">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotate(30deg),rotateX(60deg)"
|
||||
assert_equals(document.getElementById("test").style.transform, "", "expect NULL");
|
||||
}, "transform: Check bad-format multi-expr input.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotate(30deg)|rotateX(60deg)";
|
||||
assert_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check multi-expr input with tab.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = " rotate(30deg) rotateX(60deg) ";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check multi-expr input with spaces start and end.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotate(30deg) rotateX(60deg)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check multi-expr input with two spaces.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotate(30deg) rotateX(60deg)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check valied multi-expr input.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotate(0)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check rotate(0) input.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotateX(0)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check rotateX(0) input.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotateY(0)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check rotateY(0) input.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotateZ(0)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check rotateZ(0) input.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotate(string)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check rotate(string) input.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotateX(string)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check rotateX(string) input.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotateY(string)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check rotateY(string) input.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotateZ(string)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check rotateZ(string) input.");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Transforms Test: No 3D transforms on anonymous block boxes</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
<link rel="reviewer" title="Edward O'Connor" href="mailto:eoconnor@apple.com" /> <!-- 2012-10-27 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering">
|
||||
<link rel="match" href="reference/css-transforms-3d-anonymous-block-ref.html">
|
||||
<meta name="assert" content="3D transforms can not be applied to anonymous block boxes.">
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see three lines of text written from left to right and unmirrored.<p>
|
||||
<div style="transform-style: preserve-3d;">
|
||||
<span style="transform-style: preserve-3d; transform: rotateX(90deg)">Test</span>
|
||||
<p style="transform-style: preserve-3d;">Test</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Test: SVG transform in baseVal list</title>
|
||||
<link rel="author" title="Rik Cabanier" href="mailto:cabanier@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-dom">
|
||||
<link rel="match" href="reference/css-transforms-transformlist-ref.html">
|
||||
<meta name="assert" content="This test verifies that the CSS transform ends up in the list of SVG transforms">
|
||||
<style type="text/css">
|
||||
|
||||
#rect {
|
||||
fill: green;
|
||||
transform: translate(10px, 10px);
|
||||
}
|
||||
|
||||
#result {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener('load', function(){
|
||||
var r = document.getElementById("rect");
|
||||
var result = document.getElementById("result");
|
||||
if(r.transform.baseVal.length>0)
|
||||
result.style.backgroundColor = "rgb(0, 255, 0)";
|
||||
|
||||
document.getElementById("svgelement").style.display="none";
|
||||
}, false);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg id="svgelement">
|
||||
<rect id="rect" width="100" height="100"></rect>
|
||||
</svg>
|
||||
<div id="result"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: rotateX 90 degrees with perspective make it invisible</title>
|
||||
<link rel="author" title="caoqixing" href="mailto:robin.webkit@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com" /> <!-- 2013-09-03 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#propdef-perspective" />
|
||||
<link rel="match" href="reference/css3-transform-perspective-ref.html" />
|
||||
<meta name="assert" content="Test passes if rotateX 90 degrees with perspective make it invisible" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
background-color: green;
|
||||
perspective: 1000px;
|
||||
}
|
||||
#rotated {
|
||||
background-color: red;
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="container">
|
||||
<div id="rotated"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with rotateY function</title>
|
||||
<link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
left: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with rotateY function</title>
|
||||
<link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate" />
|
||||
<link rel="match" href="css3-transform-rotateY-ref.html"/>
|
||||
<meta name="assert" content="box width should be equal to projection width if transform rotateY applied">
|
||||
<style type="text/css">
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
left: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
.green{
|
||||
background-color: green;
|
||||
left: 30px;
|
||||
transform: rotateY(60deg);
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="red"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with scale function</title>
|
||||
<link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-scale" />
|
||||
<link rel="match" href="css3-transform-scale-ref-002.html" />
|
||||
<meta name="assert" content="box width and height will be twice larger if transform scale(2) applied">
|
||||
<style type="text/css">
|
||||
.red,
|
||||
.green{
|
||||
width:100px;
|
||||
height: 100px;
|
||||
background-color:green;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left:150px;
|
||||
z-index:10;
|
||||
}
|
||||
.red{
|
||||
background-color:red;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
left:100px;
|
||||
top:100px;
|
||||
z-index:9;
|
||||
}
|
||||
.green{
|
||||
transform:scale(2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="red"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with scale function</title>
|
||||
<link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-scale" />
|
||||
<style type="text/css">
|
||||
.green{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
40
tests/wpt/web-platform-tests/css/css-transforms-1/css3-transform-scale.html
Executable file
40
tests/wpt/web-platform-tests/css/css-transforms-1/css3-transform-scale.html
Executable file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with scale function</title>
|
||||
<link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com" /> <!-- 2013-09-04 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-scale" />
|
||||
<link rel="match" href="reference/css3-transform-scale-ref.html" />
|
||||
<meta name="assert" content="box width and height will be twice larger if transform scale(2) applied">
|
||||
<style type="text/css">
|
||||
.red,
|
||||
.green{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
z-index: 10;
|
||||
}
|
||||
.red{
|
||||
background-color: red;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
z-index:9;
|
||||
}
|
||||
.green{
|
||||
transform:scale(2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="red"></div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="100" height="100" fill="url(#grad)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Document transform style on SVG element with presentation attribute style on the same element</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Document transform styles on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
rect.testRect {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="testRect" y="-100" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Document transform style on SVG child element with presentation attribute styles on the parent and child elements</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Document transform styles on SVG elements should override presentation attribute styles on the same element. Presentation attribute styles on its parent should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels, and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
rect.testRect {
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g transform="rotate(90)">
|
||||
<rect class="testRect" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Document transform style on SVG group element and presentation attribute style on child element</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Document transform styles on SVG group elements should be pre-multipled on the child elements. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
g.testGroup {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g class="testGroup">
|
||||
<rect width="100" height="100" fill="url(#grad)" transform="translateY(-100)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Document transform style on SVG group element and presentation attribute style on group and child elements</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Document transform styles on SVG group elements override presentation attribute styles on the same element. Presentation attribute styles on child elements should be post-multiplied. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
g.testGroup {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g class="testGroup" transform="scale(0.5)">
|
||||
<rect width="100" height="100" fill="url(#grad)" transform="translateY(-100)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fall back to presentation attribute style of SVG element with invalid document transform style</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Invalid document transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
rect.testRect {
|
||||
transform: scale(invalid);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="testRect" y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fall back to presentation attribute styles of SVG element with invalid document transform style and presentation attribute style on group</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Invalid document transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
rect.testRect {
|
||||
transform: scale(invalid);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g transform="rotate(90)">
|
||||
<rect class="testRect" width="100" height="100" fill="url(#grad)" transform="translateY(-100)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Invalid document transform style on SVG child element with valid presentation attribute style on group and invalid presentation attribute style on child</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="When both the document and presentation attribute styles on an element are invalid, no transform should be applied. However, valid presentation attribute styles on the group should still be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
rect.testRect {
|
||||
transform: scale(invalid);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g transform="rotate(90)">
|
||||
<rect class="testRect" y="-100" width="100" height="100" fill="url(#grad)" transform="scale(invalid)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Invalid document and presentation attribute styles on an SVG element</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="When both the document and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or flipped.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
rect.testRect {
|
||||
transform: scale(invalid);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="testRect" width="100" height="100" fill="url(#grad)" transform="scale(invalid)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Invalid document transform style on SVG group with valid presentation attribute style on child element</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Invalid document transform styles on group elements should not be applied, but valid presentation attribute styles on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
g.testGroup {
|
||||
transform: scale(invalid);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g class="testGroup">
|
||||
<rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Invalid document transform style on SVG group with valid presentation attribute styles on group and child elements</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Invalid document transform styles on group elements should fall back to presentation attribute styles on the same element. Presentation attribute styles on the child should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
g.testGroup {
|
||||
transform: scale(invalid);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g class="testGroup" transform="rotate(90)">
|
||||
<rect width="100" height="100" fill="url(#grad)" transform="translateY(-100)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Invalid document transform style and invalid presentation attribute style on SVG group and valid presentation attribute style on child</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="When both the document and presentation attribute styles on a group are invalid, no transform should be applied. However, the valid presentation attribute style on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
g.testGroup {
|
||||
transform: scale(invalid);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g class="testGroup" transform="scale(invalid)">
|
||||
<rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: Document style of rotate with three arguments on SVG element with presentation attribute style on the same element</title>
|
||||
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Document style of rotate with three arguments on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
rect.testRect {
|
||||
transform: rotate(90deg,20px,20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="testRect" y="-60" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: Fall back to presentation attribute style of rotate with three arguments of SVG element with invalid document style</title>
|
||||
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Invalid document styles on SVG elements should fall back to presentation attributes styles of rotate with three arguments on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
rect.testRect {
|
||||
transform: scale(invalid);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="testRect" y="-60" width="100" height="100" fill="url(#grad)" transform="rotate(90,20px,20px)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: Invalid document and presentation attribute styles on an SVG element using rotate with three arguments</title>
|
||||
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
|
||||
<link rel="match" href="reference/svg-document-styles-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="When both the document and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or rotated.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
rect.testRect {
|
||||
transform: scale(invalid);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="testRect" width="100" height="100" fill="url(#grad)" transform="rotate(90deg,invalid,invalid)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="100" height="100" fill="url(#grad)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
.rotate {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.rotate-3-args {
|
||||
transform: rotate(90deg,20px,20px);
|
||||
}
|
||||
|
||||
.translateY {
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
|
||||
.invalid {
|
||||
transform: scale(invalid);
|
||||
}
|
||||
|
||||
.rotate-3-args {
|
||||
transform: rotate(90deg,20px,20px);
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: External transform style on SVG element with presentation attribute style on the same element</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="External styles on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="rotate" y="-100" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: External transform style on SVG child element with presentation attribute styles on the parent and child elements</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="External styles on SVG elements should override presentation attribute styles on the same element. Presentation attribute styles on its parent should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels, and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g transform="rotate(90)">
|
||||
<rect class="translateY" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: External transform style on SVG group element and presentation attribute style on child element</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="External styles on SVG group elements should be pre-multipled on the child elements. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g class="rotate">
|
||||
<rect width="100" height="100" fill="url(#grad)" transform="translateY(-100)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: External transform style on SVG group element and presentation attribute style on group and child elements</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="External styles on SVG group elements override presentation attribute styles on the same element. Presentation attribute styles on child elements should be post-multiplied. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g class="rotate" transform="scale(0.5)">
|
||||
<rect width="100" height="100" fill="url(#grad)" transform="translateY(-100)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fall back to presentation attribute style of SVG element with invalid external transform style</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Invalid external transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="invalid" y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fall back to presentation attribute styles of SVG element with invalid external transform style and presentation attribute style on group</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Invalid external transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g transform="rotate(90)">
|
||||
<rect class="invalid" width="100" height="100" fill="url(#grad)" transform="translateY(-100)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Invalid external transform style on SVG child element with valid presentation attribute style on group and invalid presentation attribute style on child</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="When both the external and presentation attribute styles on an element are invalid, no transform should be applied. However, valid presentation attribute styles on the group should still be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g transform="rotate(90)">
|
||||
<rect class="invalid" y="-100" width="100" height="100" fill="url(#grad)" transform="scale(invalid)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Invalid external and presentation attribute styles on an SVG element</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="When both the external and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or flipped.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="invalid" width="100" height="100" fill="url(#grad)" transform="scale(invalid)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Invalid external transform style on SVG group with valid presentation attribute style on child element</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Invalid external transform styles on group elements should not be applied, but valid presentation attribute styles on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g class="invalid">
|
||||
<rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Invalid external transform style on SVG group with valid presentation attribute styles on group and child elements</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Invalid external transform styles on group elements should fall back to presentation attribute styles on the same element. Presentation attribute styles on the child should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g class="invalid" transform="rotate(90)">
|
||||
<rect width="100" height="100" fill="url(#grad)" transform="translateY(-100)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Invalid external transform style and invalid presentation attribute style on SVG group and valid presentation attribute style on child</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="When both the external and presentation attribute styles on a group are invalid, no transform should be applied. However, the valid presentation attribute style on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<g class="invalid" transform="scale(invalid)">
|
||||
<rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: External style of rotate with three arguments on SVG element with presentation attribute style on the same element</title>
|
||||
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Rotate with three arguments external style on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions and not scaled.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="rotate-3-args" y="-60" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: Fall back to presentation attribute style of rotate with three arguments of SVG element with invalid external style</title>
|
||||
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="Invalid external styles on SVG elements should fall back to presentation attributes styles of rotate with three arguments on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad" x2="0%" y2="100%">
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="invalid" y="-60" width="100" height="100" fill="url(#grad)" transform="rotate(90,20px,20px)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: Invalid external and presentation attribute styles on an SVG element</title>
|
||||
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
|
||||
<link rel="match" href="reference/svg-external-styles-ref.html">
|
||||
<link rel="stylesheet" href="support/svg-external-styles.css">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="When both the external and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or rotated.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
||||
<svg>
|
||||
<!-- Fill with Gradient to avoid false positive. -->
|
||||
<defs>
|
||||
<linearGradient id="grad">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="yellow"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
||||
<rect class="invalid" width="100" height="100" fill="url(#grad)" transform="rotate(90deg,)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<rect width="200" height="200" fill="green"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<rect width="100" height="100" fill="green"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<rect width="100" height="100" fill="green"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green bar next to a vertical blue bar.</p>
|
||||
<svg>
|
||||
<rect width="50" height="100" fill="green"/>
|
||||
<rect x="50" width="50" height="100" fill="blue"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green bar to the left of a vertical yellow bar.</p>
|
||||
<svg>
|
||||
<rect width="50" height="100" fill="green"/>
|
||||
<rect x="50" width="50" height="100" fill="yellow"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translateX with translation-value argument without unit</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with unit less arguments for translation-value. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(50)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with pixel unit on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'px' on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(25px)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with point unit on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'pt' on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(18.75pt)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with pica unit on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'pc' on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(1.5625pc)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with millimeter unit on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'mm' on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(6.614583333mm)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with centimeter unit on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'cm' on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(0.661458333cm)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with inch unit on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'in' on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(0.260416667in)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with em unit on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg ahem">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the relative length unit 'em' on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 1;
|
||||
font: 25px Ahem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(1em)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translateX with translation-value and a unit less argument in scientific notation</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with unit less arguments in scientific numbers for translation-value. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(2.5e1)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with pixel unit in scientific notation on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'px' in scientific numbers on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(2.5e1px)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with point unit in scientific notation on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'pt' in scientific numbers on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(1.875e1pt)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with pica unit in scientific notation on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'pc' in scientific numbers on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(0.15625e1pc)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with millimeter unit in scientific notation on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'mm' in scientific numbers on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(0.6614583333e1mm)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with centimeter unit in scientific notation on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'cm' in scientific numbers on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(0.0661458333e1cm)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with inch unit in scientific notation on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'in' in scientific numbers on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(0.0260416667e1in)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with em unit in scientific notation on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg ahem">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the relative length unit 'em' in scientific numbers on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 1;
|
||||
font: 25px Ahem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(0.1e1em)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translateX with translation-value unit less argument in scientific notation with a negative exponent</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with unit less arguments in scientific numbers with negative exponents for translation-value. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(250e-1)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with pixel unit in scientific notation with a negative exponent on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'px' in scientific numbers with negative exponents on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(250e-1px)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with point unit in scientific notation with a negative exponent on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'pt' in scientific numbers with negative exponents on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(187.5e-1pt)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with pica unit in scientific notation with a negative exponent on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'pc' in scientific numbers with negative exponents on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(15.625e-1pc)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with millimeter unit in scientific notation with a negative exponent on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'mm' in scientific numbers with negative exponents on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(66.14583333e-1mm)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with centimeter unit in scientific notation with a negative exponent on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'cm' in scientific numbers with negative exponents on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(6.61458333e-1cm)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with inch unit in scientific notation with a negative exponent on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the absolute length unit 'in' in scientific numbers with negative exponents on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(2.60416667e-1in)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with em unit in scientific notation with a negative exponent on translateX</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg ahem">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with the relative length unit 'em' in scientific numbers with negative exponents on translation-value arguments. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 1;
|
||||
font: 25px Ahem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translateX(10e-1em)">
|
||||
<stop offset="50%" stop-color="green"/>
|
||||
<stop offset="50%" stop-color="red"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad)" x="0" y="0" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue