mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.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="greenSquare face"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Amol Shanbhag" href="mailto:amolvshanbhag@yahoo.com">
|
||||
<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<style type="text/css">
|
||||
div{
|
||||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
|
||||
}
|
||||
p{
|
||||
padding-top: 130px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="greenSquare"></div>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transforms rotateX Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 60px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square with black border around, and no any red.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square and no red.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.container {
|
||||
height: 100px;
|
||||
top: 60px;
|
||||
width: 400px;
|
||||
}
|
||||
div.blue {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
left: 200px;
|
||||
width: 100px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</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="blue"></div>
|
||||
<div class="green"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Chris Sanborn" href="mailto:granimalcracker@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color:green;
|
||||
}
|
||||
</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">
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference - CSS Transforms Test: transform property with scale function and move its origin</title>
|
||||
<link rel="author" title="Chris Sanborn" href="mailto:granimalcracker@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color:green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if the green square completely covers the red square.</p>
|
||||
<div class="container">
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Transforms Test: Reference file</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 -->
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see three lines of text written from left to right and unmirrored.<p>
|
||||
<div>
|
||||
<span>Test</span>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Transforms Test: UNIQUE TEST DESCRIPTION</title>
|
||||
<link rel="author" title="Rik Cabanier" href="mailto:cabanier@adobe.com">
|
||||
<style type="text/css">
|
||||
|
||||
#result {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="result"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: transform perspective Reference</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 -->
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</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 -->
|
||||
<style type="text/css">
|
||||
.green {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 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,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Andres Ugarte" href="mailto:anduga@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="container">
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Andres Ugarte" href="mailto:anduga@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="container">
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Reference</title>
|
||||
<link rel="author" title="Larry McLister" href="mailto:lmcliste@adobe.com"/>
|
||||
<style type="text/css">
|
||||
#greenBottomDiv {
|
||||
position: absolute;
|
||||
background: green;
|
||||
border-left: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-top-color: black;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a black line on the top of green box and no red.</p>
|
||||
<div id="greenBottomDiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Reference</title>
|
||||
<link rel="author" title="Larry McLister" href="mailto:lmcliste@adobe.com"/>
|
||||
<style type="text/css">
|
||||
#greenBottomDiv {
|
||||
position: absolute;
|
||||
background: green;
|
||||
border-left: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-right-color: black;
|
||||
border-top-color: transparent;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a black line on the right of green box and no red.</p>
|
||||
<div id="greenBottomDiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Reference</title>
|
||||
<link rel="author" title="Larry McLister" href="mailto:lmcliste@adobe.com"/>
|
||||
<style type="text/css">
|
||||
#greenBottomDiv {
|
||||
position: absolute;
|
||||
background: green;
|
||||
border-left: black;
|
||||
border-bottom-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a black line on the left of green box and no red.</p>
|
||||
<div id="greenBottomDiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Zou Rui" href="mailto:zrxldl@gmail.com">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="container">
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="greenSquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
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="greenSquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Testing 1 - skew()</title>
|
||||
<link rel="author" title="Myriam Goude" href="mailto:mymygo@gmail.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style>
|
||||
|
||||
h4 {clear:both;}
|
||||
|
||||
/* Test 1 - skew on block types */
|
||||
|
||||
svg {
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>
|
||||
Test 1 - Tests with degrees on block elements.
|
||||
</h3>
|
||||
<h4>
|
||||
There should be a green block on the page.
|
||||
</h4>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<polygon points="0,0 150,55 235,205 88,150" style="fill:lime"/>
|
||||
</svg>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms API Test: transform-origin</title>
|
||||
<link rel="author" title="Michael Downey" href="mailto:miked782000@yahoo.com">
|
||||
<style type="text/css">
|
||||
body {margin:0}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
#relativeContainer {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="relativeContainer">
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Oleg Janeiko" href="mailto:oleg@the-incredible.me">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: green;
|
||||
float: left;
|
||||
margin: 50px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green squares of the same size.</p>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tranforms Reference File</title>
|
||||
<link rel="author" title="Serena Wales" href="mailto:serena@codeforamerica.org">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/* Position the div so its identical to the div in the test file */
|
||||
/* Add fill color to match the test file */
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="container">
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with rotate function and one parameter</title>
|
||||
<link rel="reviewer author" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-04 -->
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg width="300" height="300">
|
||||
<rect x="100" y="100" width="100" height="100" transform="rotate(45, 150, 150)" style="fill: green"></rect>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with rotate function and one parameter</title>
|
||||
<link rel="author" title="Jacy-Bai" href="mailto:jinxin.bai@gmail.com">
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
.greenRectangle {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
left: 125px;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green rectangle and no red.</p>
|
||||
<div class="greenRectangle"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with scale function and rotate function with one parameter</title>
|
||||
<link rel="author" title="Ji Kai" href="mailto:7jikai@gmail.com">
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-04 -->
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="greenSquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Ji Kai" href="mailto:7jikai@gmail.com">
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-04 -->
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#left {
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
#right {
|
||||
left: 175px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green rectangles.</p>
|
||||
<div id="left"></div>
|
||||
<div id="right"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with skew function for X axis.</title>
|
||||
<link rel="author" title="Jacy-Bai" href="mailto:jinxin.bai@gmail.com">
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
.triangle-topright {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
border-top: 100px solid green;
|
||||
border-left: 100px solid transparent;
|
||||
}
|
||||
|
||||
.triangle-bottomleft {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 50px;
|
||||
left: 150px;
|
||||
border-bottom: 100px solid green;
|
||||
border-right: 100px solid transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a parallelogram and no red.</p>
|
||||
<div class="triangle-topright"></div>
|
||||
<div class="triangle-bottomleft"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Test: transform property with skew function for Y axis.</title>
|
||||
<link rel="author" title="Jacy-Bai" href="mailto:jinxin.bai@gmail.com">
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
.triangle-bottomleft {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 100px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 100px solid green;
|
||||
border-right: 100px solid transparent;
|
||||
}
|
||||
.triangle-topright {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 100px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 100px solid green;
|
||||
border-left: 100px solid transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green parallelogram and no red.</p>
|
||||
<div class="triangle-topright"></div>
|
||||
<div class="triangle-bottomleft"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
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="greenSquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms API Test: transform preserve-3d</title>
|
||||
<link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com">
|
||||
<style>
|
||||
div {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>You should only see a GREEN box if this test passes!</p>
|
||||
<div class="container">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms API Test: transform rotateX</title>
|
||||
<link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com">
|
||||
<style>
|
||||
div {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>You should only see a GREEN box if this test passes!</p>
|
||||
<div class="container">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms API Test: transform rotateY</title>
|
||||
<link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com">
|
||||
<style>
|
||||
div {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
border: 1px solid black;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>You should only see a GREEN box if this test passes!</p>
|
||||
<div class="container">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Transforms Test: 3d transform polygon cycle</title>
|
||||
<link rel="author" title="Leo Ziegler" href="mailto:leo.ziegler@gmail.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
}
|
||||
.rect {
|
||||
position: absolute;
|
||||
}
|
||||
#red0 {
|
||||
background-color: red;
|
||||
left: 6px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
#green0 {
|
||||
background-color: green;
|
||||
top: 6px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
#blue0 {
|
||||
background-color: blue;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
transform: translate(40px, 81px) rotate(45deg);
|
||||
}
|
||||
#red1 {
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
transform: translate(94px, 0px);
|
||||
}
|
||||
#green1 {
|
||||
background-color: green;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
transform: translate(0px, 94px);
|
||||
}
|
||||
#blue1 {
|
||||
background-color: blue;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
transform: translate(102px, 19px) rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there red is over green, green is over blue and blue is over red.</p>
|
||||
<div id="container">
|
||||
<div class="rect" id="blue0"></div>
|
||||
<div class="rect" id="green0"></div>
|
||||
<div class="rect" id="red0"></div>
|
||||
<div class="rect" id="red1"></div>
|
||||
<div class="rect" id="green1"></div>
|
||||
<div class="rect" id="blue1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Michael Downey" href="mailto:miked782000@yahoo.com">
|
||||
<style type="text/css">
|
||||
body {margin:0}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
#relativeContainer {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="relativeContainer">
|
||||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green shape and no red.</p>
|
||||
<div class="greenSquare">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="200px" height="100px" viewBox="0 0 200 100" xml:space="preserve">
|
||||
<polygon fill="green" points="200,100 100,100 0,0 100,0 "/>
|
||||
</svg>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com">
|
||||
<meta name="flags" content="svg">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green shape and no red.</p>
|
||||
<div class="greenSquare">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="100px" height="200px" viewBox="0 0 100 200" xml:space="preserve">
|
||||
<polygon fill="green" points="100,200 0,99.999 0,0 100,100 "/>
|
||||
</svg>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 1000px;
|
||||
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="greenSquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transforms Reference File</title>
|
||||
<link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
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="greenSquare"></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue