mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
This commit is contained in:
James Graham
parent
1a81b18b9f
commit
2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
img {
|
||||
float: left;
|
||||
}
|
||||
.green {
|
||||
position: relative;
|
||||
left: 50px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background: rgb(0, 100, 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if you see a solid green square. There should be no red.
|
||||
</p>
|
||||
<div class="container">
|
||||
<img src="../support/left-half-rectangle-50.png" />
|
||||
<div class="green"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
}
|
||||
img {
|
||||
float: left;
|
||||
}
|
||||
.green {
|
||||
float: right;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background-color: rgb(0, 100, 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if you see a green rectangle, a black rectangle, and a green rectangle next to each other. There should be no red.
|
||||
</p>
|
||||
<div class="container">
|
||||
<img src="../support/left-half-rectangle-70.png" />
|
||||
<div class="green"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: rgb(0, 100, 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if you see a solid green square. There should be no red.
|
||||
</p>
|
||||
<div class="container">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.green, .blue {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
}
|
||||
.left-rect {
|
||||
left: 10px;
|
||||
}
|
||||
.right-rect {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
left: 70px;
|
||||
background: rgb(0,100,0);
|
||||
}
|
||||
.blue {
|
||||
width: 2px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
.left-line { left: 65px; }
|
||||
.right-line { left: 125px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if the green rectangle on the right is completely between the two blue lines.
|
||||
There should be no red.
|
||||
</p>
|
||||
<div class="green left-rect">
|
||||
<img src="../support/left-half-rectangle.png" />
|
||||
</div>
|
||||
<div class="green right-rect"></div>
|
||||
<div class="blue left-line"></div>
|
||||
<div class="blue right-line"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.green {
|
||||
background-color: rgb(0,100,0);
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
.left-rect { left: 10px; }
|
||||
.right-rect { left: 70px; }
|
||||
|
||||
.blue {
|
||||
width: 2px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
.left-line { left: 65px; }
|
||||
.right-line { left: 125px }
|
||||
|
||||
.green, .blue {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if the green rectangle on the right is completely between the two blue lines.
|
||||
There should be no red.
|
||||
</p>
|
||||
<div class="green left-rect"></div>
|
||||
<div class="green right-rect"></div>
|
||||
<div class="blue left-line"></div>
|
||||
<div class="blue right-line"></div>
|
||||
|
||||
</body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="zoltan@adobe.com" rel="author" title="Zoltan Horvath" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 8px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
color: green;
|
||||
}
|
||||
#image { float: right; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if there's a green square with an image at top right with vertical white and green stripes.
|
||||
There should be no red.
|
||||
</p>
|
||||
<div class="container">
|
||||
<img src="../support/right-half-rectangle.jpg" id="image" />
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
img {
|
||||
position: relative;
|
||||
left: -50px;
|
||||
}
|
||||
.green {
|
||||
float: left;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background: rgb(0, 100, 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if you see a solid green square. There should be no red.
|
||||
</p>
|
||||
<div class="container">
|
||||
<div class="green"></div>
|
||||
<img src="../support/right-half-rectangle.png" />
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
text-align: right;
|
||||
color: green;
|
||||
}
|
||||
#image {
|
||||
float: right;
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if no red is visible.</p>
|
||||
<div id="container">
|
||||
<img src="../support/left-half-rectangle.jpg" id="image" />
|
||||
X<br />X<br />X<br />X
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
text-align: right;
|
||||
color: green;
|
||||
}
|
||||
#image {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
|
||||
<div id="container">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg==" id="image" />
|
||||
X<br />X
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
text-align: right;
|
||||
color: green;
|
||||
}
|
||||
#image {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
|
||||
<div id="container">
|
||||
<img src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>" id="image" />
|
||||
X<br />X
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
padding-left: 90px;
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
color: green;
|
||||
}
|
||||
#image {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 100px;
|
||||
float: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if no red is visible.</p>
|
||||
<div id="container">
|
||||
<img src="../support/right-half-rectangle.png" id="image" />
|
||||
X<br />X<br />X<br /><span style="padding-left: 70px">X</span>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
padding-left: 90px;
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
color: green;
|
||||
}
|
||||
#image {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 100px;
|
||||
float: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if no red is visible.</p>
|
||||
<div id="container">
|
||||
<img src="../support/right-half-rectangle.gif" id="image" />
|
||||
X<br />X<br />X<br /><span style="padding-left: 70px">X</span>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
text-align: right;
|
||||
color: green;
|
||||
}
|
||||
#image {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
|
||||
<div id="container">
|
||||
<img src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>" id="image" />
|
||||
X<br />X
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.green {
|
||||
background-color: rgb(0,100,0);
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
}
|
||||
.left-rect { left: 10px; }
|
||||
.right-rect { left: 120px; }
|
||||
|
||||
.blue {
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
.left-line { left: 115px; }
|
||||
.right-line { left: 230px }
|
||||
|
||||
.green, .blue {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if the green rectangle on the right is completely between the two blue lines.
|
||||
There should be no red.
|
||||
</p>
|
||||
<div class="green left-rect"></div>
|
||||
<div class="green right-rect"></div>
|
||||
<div class="blue left-line"></div>
|
||||
<div class="blue right-line"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.green {
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgb(0,100,0);
|
||||
}
|
||||
.blue {
|
||||
top: 50px;
|
||||
left: 60px;
|
||||
width: 2px;
|
||||
height: 140px;
|
||||
background-color: blue;
|
||||
}
|
||||
.green, .blue { position: absolute; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if there are two identical green rectangles on either side of the blue line.
|
||||
There should be no red.
|
||||
</p>
|
||||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin-left: 0;
|
||||
}
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
text-align: center;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
color: green;
|
||||
line-height: 1em;
|
||||
}
|
||||
#level-1 {
|
||||
width: 400px;
|
||||
height: 80px;
|
||||
}
|
||||
#level-2 {
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
#level-3 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
margin-left: 150px;
|
||||
}
|
||||
#level-4 {
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
margin-left: 175px;
|
||||
}
|
||||
#level5 {
|
||||
width: 400px;
|
||||
height: 20px;
|
||||
}
|
||||
#left-triangle, #right-triangle {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
#left-triangle {
|
||||
clip-path: polygon(0 0, 200px 200px, 0 200px);
|
||||
}
|
||||
#right-triangle {
|
||||
left: 200px;
|
||||
clip-path: polygon(200px 0, 200px 200px, 0 200px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if the green shape does not intersect either of the triangles and
|
||||
there is one green horizontal bar beneath the triangles. There should be no red.
|
||||
</p>
|
||||
<div id="container">
|
||||
<div id="level-1">
|
||||
XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXX
|
||||
</div>
|
||||
<div id="level-2">
|
||||
XXXXXXXXX XXXXXXX
|
||||
</div>
|
||||
<div id="level-3">
|
||||
XXXXX XXX
|
||||
</div>
|
||||
<div id="level-4">
|
||||
X
|
||||
</div>
|
||||
<br />
|
||||
<div id="level-5">
|
||||
XXXXXXXXXXXXXXXXX
|
||||
</div>
|
||||
</div>
|
||||
<div id="left-triangle"></div>
|
||||
<div id="right-triangle"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 400px;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1.5em;
|
||||
color: green;
|
||||
}
|
||||
#square{
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 196px;
|
||||
height: 196px;
|
||||
border: 1px solid black;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if there are two columns of six green horizontal bars of the same
|
||||
size inside the square and two columns of six matching green bars outside and to the
|
||||
right of the square. There should be no red.
|
||||
</p>
|
||||
<div id="container">
|
||||
XXXX XXXX XXXX XXXX
|
||||
XXXX XXXX XXXX XXXX
|
||||
XXXX XXXX XXXX XXXX
|
||||
XXXX XXXX XXXX XXXX
|
||||
XXXX XXXX XXXX XXXX
|
||||
XXXX XXXX XXXX XXXX
|
||||
</div>
|
||||
<div id="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 250px;
|
||||
height: 105px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.bar {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#line-1 {
|
||||
top: 10px;
|
||||
left: 65px;
|
||||
width: 160px;
|
||||
}
|
||||
#line-2 {
|
||||
top: 40px;
|
||||
left: 80px;
|
||||
width: 140px;
|
||||
}
|
||||
#line-3 {
|
||||
top: 70px;
|
||||
left: 95px;
|
||||
width: 120px;
|
||||
}
|
||||
#triangle {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lightblue;
|
||||
clip-path: polygon(50px 0px, 100px 100px, 0px 100px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if all there are three green horizontal bars to the right of the
|
||||
triangle that are all inside the rectangle and there should be no green to the left
|
||||
of the triangle. There should be no red.
|
||||
</p>
|
||||
<div id="container">
|
||||
<div class="bar" id="line-1"></div>
|
||||
<div class="bar" id="line-2"></div>
|
||||
<div class="bar" id="line-3"></div>
|
||||
</div>
|
||||
<div id="triangle"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 260px;
|
||||
height: 120px;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1.5em;
|
||||
border: 1px solid black;
|
||||
padding-left: 2px;
|
||||
}
|
||||
#margin-line {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 263px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.bar {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#bar-1 {
|
||||
top: 5px;
|
||||
width: 240px;
|
||||
}
|
||||
#bar-2 {
|
||||
top: 35px;
|
||||
width: 240px;
|
||||
}
|
||||
#bar-3 {
|
||||
top: 65px;
|
||||
left: 22px;
|
||||
width: 220px;
|
||||
}
|
||||
#bar-4 {
|
||||
top: 95px;
|
||||
left: 52px;
|
||||
width: 200px;
|
||||
}
|
||||
#triangle {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lightblue;
|
||||
margin-left: 2px;
|
||||
clip-path: polygon(0% 50%, 50% 100%, 0 100%);;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if one green bar is inside the top rectangle, three green bars
|
||||
are in the bottom rectangle, and none intersect the triangle. There should be no red.
|
||||
</p>
|
||||
<div id="container">
|
||||
<div class="bar" id="bar-1"></div>
|
||||
<div class="bar" id="bar-2"></div>
|
||||
<div class="bar" id="bar-3"></div>
|
||||
<div class="bar" id="bar-4"></div>
|
||||
</div>
|
||||
<div id="margin-line"></div>
|
||||
<div id="triangle"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 262px;
|
||||
height: 150px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#failure-container {
|
||||
|
||||
}
|
||||
#margin-line {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 263px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
background-color: green;
|
||||
z-index: -1;
|
||||
}
|
||||
#bar-1 {
|
||||
top: 7px;
|
||||
left: 2px;
|
||||
width: 255px;
|
||||
}
|
||||
#bar-2 {
|
||||
top: 37px;
|
||||
left: 2px;
|
||||
width: 255px;
|
||||
}
|
||||
#bar-3 {
|
||||
top: 67px;
|
||||
left: 22px;
|
||||
width: 225px;
|
||||
}
|
||||
#bar-4 {
|
||||
top: 97px;
|
||||
left: 122px;
|
||||
width: 135px;
|
||||
}
|
||||
#bar-5 {
|
||||
top: 127px;
|
||||
left: 152px;
|
||||
width: 105px;
|
||||
}
|
||||
.triangle {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lightblue;
|
||||
clip-path: polygon(0% 50%, 50% 100%, 0 100%);;
|
||||
|
||||
}
|
||||
#triangle-1 {
|
||||
top: 90px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
#triangle-2 {
|
||||
top: 120px;
|
||||
margin-left: 102px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if one green bar is inside the top rectangle, four green bars
|
||||
are in the bottom rectangle, and none intersect the triangles. There should be no
|
||||
red.
|
||||
</p>
|
||||
<div id="container">
|
||||
<div class="fail" id="bar-1"></div>
|
||||
<div class="fail" id="bar-2"></div>
|
||||
<div class="fail" id="bar-3"></div>
|
||||
<div class="fail" id="bar-4"></div>
|
||||
<div class="fail" id="bar-5"></div>
|
||||
</div>
|
||||
<div id="margin-line"></div>
|
||||
<div class="triangle" id="triangle-1"></div>
|
||||
<div class="triangle" id="triangle-2"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 198px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 200px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 100px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 60px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 168px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 170px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 140px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 100px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
font: 15px Ahem, sans-serif;
|
||||
line-height: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
.circle {
|
||||
z-index: -1;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 80px;
|
||||
background-color: blue;
|
||||
overflow: hidden;
|
||||
}
|
||||
#left-circle-outline {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
}
|
||||
.left-circle-float-line {
|
||||
float: left;
|
||||
clear: left;
|
||||
height: 20px;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if all of the squares are green. There should be no red.</p>
|
||||
<div class="container">
|
||||
X<br />
|
||||
<div id="left-circle-outline"></div>
|
||||
<!-- generated left-rounded-rect-float-line divs will be inserted here -->
|
||||
X<br />
|
||||
X<br />
|
||||
X<br />
|
||||
X<br />
|
||||
X<br />
|
||||
X<br />
|
||||
X<br />
|
||||
X<br />
|
||||
X
|
||||
</div>
|
||||
|
||||
<script src="../../support/rounded-rectangle.js"></script>
|
||||
<script src="../../support/subpixel-utils.js"></script>
|
||||
<script>
|
||||
genLeftRoundedRectFloatShapeOutsideRefTest({
|
||||
roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
|
||||
containerWidth: 200,
|
||||
containerHeight: 200,
|
||||
lineHeight: 20,
|
||||
floatElementClassSuffix: "circle-float-line",
|
||||
insertElementIdSuffix: "circle-outline"
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 168px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 170px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 140px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 100px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
font: 15px Ahem, sans-serif;
|
||||
line-height: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
.ellipse {
|
||||
z-index: -1;
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
border-radius: 80px;
|
||||
background-color: blue;
|
||||
overflow: hidden;
|
||||
}
|
||||
#left-ellipse-outline {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
}
|
||||
.left-ellipse-float-line {
|
||||
float: left;
|
||||
clear: left;
|
||||
height: 20px;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if all of the squares are green. There should be no red.</p>
|
||||
<div class="container">
|
||||
X<br />
|
||||
<div id="left-ellipse-outline"></div>
|
||||
<!-- generated left-rounded-rect-float-line divs will be inserted here -->
|
||||
X<br />
|
||||
X<br />
|
||||
X<br />
|
||||
X<br />
|
||||
X
|
||||
</div>
|
||||
|
||||
<script src="../../support/rounded-rectangle.js"></script>
|
||||
<script src="../../support/subpixel-utils.js"></script>
|
||||
<script>
|
||||
genLeftRoundedRectFloatShapeOutsideRefTest({
|
||||
roundedRect: {x: 0, y: 20, width: 160, height: 80, rx: 80, ry: 40},
|
||||
containerWidth: 200,
|
||||
containerHeight: 200,
|
||||
lineHeight: 20,
|
||||
floatElementClassSuffix: "ellipse-float-line",
|
||||
insertElementIdSuffix: "ellipse-outline"
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
#shape {
|
||||
margin-left: 25px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="shape"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="betravis@adobe.com" rel="author" title="Bear Travis" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
line-height: 1;
|
||||
}
|
||||
#test {
|
||||
color: green;
|
||||
}
|
||||
#gradient {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if you see a green square. There should be no red.
|
||||
</p>
|
||||
<div class="container" id="test">
|
||||
<div id="gradient"></div>
|
||||
xx xx xx xx
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="betravis@adobe.com" rel="author" title="Bear Travis" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
line-height: 1;
|
||||
}
|
||||
#test {
|
||||
color: green;
|
||||
}
|
||||
#gradient {
|
||||
float: right;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if you see a green square. There should be no red.
|
||||
</p>
|
||||
<div class="container" id="test">
|
||||
<div id="gradient"></div>
|
||||
xx xx xx xx
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:stearns@adobe.com" rel="author" title="Alan Stearns" />
|
||||
<style type="text/css">
|
||||
.square {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#test {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 200px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#test > .right {
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if there are four green squares alternating left and right. There
|
||||
should be no red.
|
||||
</p>
|
||||
<div id="test">
|
||||
<div class="square"></div><br />
|
||||
<div class="square right"></div><br />
|
||||
<div class="square"></div><br />
|
||||
<div class="square right"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#green-square {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is green square and no red.</p>
|
||||
<div id="green-square"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#green-square {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is green square and no red.</p>
|
||||
<div id="green-square"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.line {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
.right {
|
||||
left: 220px;
|
||||
}
|
||||
.left {
|
||||
left: 60px;
|
||||
}
|
||||
.top {
|
||||
top: 90px;
|
||||
left: 180px;
|
||||
}
|
||||
.bottom {
|
||||
top: 170px;
|
||||
left: 60px;
|
||||
}
|
||||
.square {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there there are two green squares between the blue lines. There should be no red.</p>
|
||||
<div class="bottom square"></div>
|
||||
<div class="top square"></div>
|
||||
<div class="left line"></div>
|
||||
<div class="right line"></div>
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
|
|
@ -0,0 +1,29 @@
|
|||
CSS Global Support Directory
|
||||
============================
|
||||
|
||||
This directory contains common support files (such as images and external
|
||||
style sheets). These are sync'ed into the support directories of all our
|
||||
test suites. If you have test-suite-specific support files, please add
|
||||
them to the appropriate test-suite-specific support/ directory.
|
||||
|
||||
If you add to a support/ directory, please run the tools/supportprop.py
|
||||
script from the top of the repository to cascade support files into the
|
||||
lower-level support directories.
|
||||
|
||||
Description of the Common Support File Collection
|
||||
-------------------------------------------------
|
||||
|
||||
The 1x1-* images are all exactly one pixel.
|
||||
|
||||
The swatch-* images all use 15x15 cells.
|
||||
|
||||
The square-* images all use 15x15 cells with one pixel borders.
|
||||
|
||||
The pattern-* images use cells of various sizes:
|
||||
|
||||
pattern-gg-gr.png 20x20
|
||||
pattern-grg-rgr-grg.png 20x20
|
||||
pattern-rgr-grg-rgr.png 20x20
|
||||
pattern-tr.png 15x15
|
||||
pattern-grg-rrg-rgg.png 15x15
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
.a { color: green; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
.b { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.c { color: red; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" style="background-color: rgba(0,0,0,0.2)" version="1.1">
|
||||
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 252 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" style="background-color: rgba(0,0,0,0.5)" version="1.1">
|
||||
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 252 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1">
|
||||
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 252 B |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" version="1.1">
|
||||
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 210 B |
|
|
@ -0,0 +1,866 @@
|
|||
var ParsingUtils = (function() {
|
||||
function testInlineStyle(value, expected) {
|
||||
var div = document.createElement('div');
|
||||
div.style.setProperty('shape-outside', value);
|
||||
var actual = div.style.getPropertyValue('shape-outside');
|
||||
assert_equals(actual, expected);
|
||||
}
|
||||
|
||||
function testComputedStyle(value, expected) {
|
||||
var div = document.createElement('div');
|
||||
div.style.setProperty('shape-outside', value);
|
||||
document.body.appendChild(div);
|
||||
var style = getComputedStyle(div);
|
||||
var actual = style.getPropertyValue('shape-outside');
|
||||
actual = roundResultStr(actual);
|
||||
document.body.removeChild(div);
|
||||
|
||||
// Some of the tests in this suite have either/or expected results
|
||||
// so this check allows for testing that at least one of them passes.
|
||||
// Description of the 2 expecteds is below near calcTestValues.
|
||||
if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
|
||||
assert_true(expected[0] == actual || expected[1] == actual)
|
||||
} else {
|
||||
assert_equals(actual, typeof expected !== 'undefined' ? expected : value);
|
||||
}
|
||||
}
|
||||
|
||||
function testShapeMarginInlineStyle(value, expected) {
|
||||
var div = document.createElement('div');
|
||||
div.style.setProperty('shape-outside', "border-box inset(10px)");
|
||||
div.style.setProperty('shape-margin', value);
|
||||
var actual = div.style.getPropertyValue('shape-margin');
|
||||
assert_equals(actual, expected);
|
||||
}
|
||||
|
||||
function testShapeMarginComputedStyle(value, expected) {
|
||||
|
||||
var outerDiv = document.createElement('div');
|
||||
outerDiv.style.setProperty('width', '100px');
|
||||
|
||||
var innerDiv = document.createElement('div');
|
||||
innerDiv.style.setProperty('shape-outside', "border-box inset(10px)");
|
||||
innerDiv.style.setProperty('shape-margin', value);
|
||||
|
||||
outerDiv.appendChild(innerDiv);
|
||||
document.body.appendChild(outerDiv);
|
||||
|
||||
var style = getComputedStyle(innerDiv);
|
||||
var actual = style.getPropertyValue('shape-margin');
|
||||
|
||||
assert_not_equals(actual, null);
|
||||
if(actual.indexOf('calc') == -1 )
|
||||
actual = roundResultStr(actual);
|
||||
document.body.removeChild(outerDiv);
|
||||
|
||||
// See comment above about multiple expected results
|
||||
if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
|
||||
assert_true(expected[0] == actual || expected[1] == actual)
|
||||
} else {
|
||||
assert_equals(actual, !expected ? '0px' : expected);
|
||||
}
|
||||
}
|
||||
|
||||
function testShapeThresholdInlineStyle(value, expected) {
|
||||
var div = document.createElement('div');
|
||||
div.style.setProperty('shape-outside', 'url(someimage.png)');
|
||||
div.style.setProperty('shape-image-threshold', value);
|
||||
var actual = div.style.getPropertyValue('shape-image-threshold');
|
||||
assert_equals(actual, expected);
|
||||
}
|
||||
|
||||
function testShapeThresholdComputedStyle(value, expected) {
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.style.setProperty('shape-outside', 'url(someimage.png)');
|
||||
div.style.setProperty('shape-image-threshold', value);
|
||||
document.body.appendChild(div);
|
||||
|
||||
var style = getComputedStyle(div);
|
||||
var actual = style.getPropertyValue('shape-image-threshold');
|
||||
|
||||
assert_not_equals(actual, null);
|
||||
if(actual.indexOf('calc') == -1 )
|
||||
actual = roundResultStr(actual);
|
||||
document.body.removeChild(div);
|
||||
|
||||
// See comment above about multiple expected results
|
||||
if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
|
||||
assert_true(expected[0] == actual || expected[1] == actual)
|
||||
} else {
|
||||
assert_equals(actual, !expected ? '0' : expected);
|
||||
}
|
||||
}
|
||||
|
||||
// Builds an array of test cases to send to testharness.js where one test case is: [name, actual, expected]
|
||||
// These test cases will verify results from testInlineStyle() or testComputedStyle()
|
||||
function buildTestCases(testCases, testType) {
|
||||
var results = [];
|
||||
|
||||
// If test_type isn't specified, test inline style
|
||||
var type = typeof testType == 'undefined' ? 'invalid': testType;
|
||||
|
||||
testCases.forEach(function(test) {
|
||||
oneTestCase = [];
|
||||
|
||||
// name - annotated by type (inline vs. computed)
|
||||
if ( test.hasOwnProperty('name') ) {
|
||||
oneTestCase.push(test['name'] +' - '+ type);
|
||||
} else {
|
||||
// If test_name isn't specified, use the actual
|
||||
oneTestCase.push(test['actual'] +' - '+ type);
|
||||
}
|
||||
|
||||
// actual
|
||||
oneTestCase.push(test['actual'])
|
||||
|
||||
// expected
|
||||
if( type.indexOf('invalid') != -1 ){
|
||||
oneTestCase.push(null)
|
||||
} else if( type == 'inline' ) {
|
||||
oneTestCase.push(test['expected_inline']);
|
||||
} else if( type == 'computed' ){
|
||||
oneTestCase.push( convertToPx(test['expected_computed']) );
|
||||
}
|
||||
results.push(oneTestCase);
|
||||
});
|
||||
return results;
|
||||
}
|
||||
|
||||
|
||||
function buildPositionTests(shape, valid, type, units) {
|
||||
var results = new Array();
|
||||
var convert = type.indexOf('computed') != -1 ? true : false;
|
||||
|
||||
if(Object.prototype.toString.call( units ) === '[object Array]') {
|
||||
units.forEach(function(unit) {
|
||||
positionTests = buildPositionTests(shape, valid, type, unit);
|
||||
results = results.concat(positionTests);
|
||||
});
|
||||
} else {
|
||||
if (valid) {
|
||||
validPositions.forEach(function(test) {
|
||||
var testCase = [], testName, actual, expected;
|
||||
// skip if this isn't explicitly testing length units
|
||||
if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1)) {
|
||||
// actual
|
||||
actual = shape + '(at ' + setUnit(test[0], false, units) +')';
|
||||
|
||||
// expected
|
||||
// if(convert && shape == 'circle')
|
||||
// expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
|
||||
// else if(convert && shape == 'ellipse')
|
||||
// expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
|
||||
// else
|
||||
expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
|
||||
|
||||
// name
|
||||
if (type == 'lengthUnit + inline')
|
||||
testName = 'test unit (inline): ' + units +' - '+ actual;
|
||||
else if (type == 'lengthUnit + computed')
|
||||
testName = 'test unit (computed): ' + units +' - '+ actual;
|
||||
else
|
||||
testName = (actual + ' serializes as ' + expected +' - '+ type);
|
||||
|
||||
testCase.push(testName)
|
||||
testCase.push(actual);
|
||||
testCase.push(expected);
|
||||
results.push(testCase);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
invalidPositions.forEach(function(test) {
|
||||
var testValue = shape + '(at ' + setUnit(test, false, units) +')';
|
||||
testCase = new Array();
|
||||
testCase.push(testValue + ' is invalid');
|
||||
testCase.push(testValue);
|
||||
testCase.push(null);
|
||||
results.push(testCase);
|
||||
});
|
||||
}
|
||||
}
|
||||
return unique(results);
|
||||
}
|
||||
|
||||
function buildRadiiTests(shape, type, units) {
|
||||
var results = new Array();
|
||||
var testUnits = typeof units == 'undefined' ? 'px': units;
|
||||
var convert = type.indexOf('computed') != -1 ? true : false;
|
||||
|
||||
if(Object.prototype.toString.call( testUnits ) === '[object Array]') {
|
||||
testUnits.forEach(function(unit) {
|
||||
radiiTests = buildRadiiTests(shape, type, unit);
|
||||
results = results.concat(radiiTests);
|
||||
});
|
||||
} else {
|
||||
var validRadii = shape == 'circle' ? validCircleRadii : validEllipseRadii;
|
||||
validRadii.forEach(function(test) {
|
||||
var testCase = [], name, actual, expected;
|
||||
|
||||
// skip if this isn't explicitly testing length units
|
||||
if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1) ) {
|
||||
actual = shape + '(' + setUnit(test[0], false, testUnits) +')';
|
||||
// name
|
||||
if (type.indexOf('lengthUnit') != -1) {
|
||||
name = 'test unit: ' + units +' - '+ actual;
|
||||
if(type.indexOf('computed') != -1)
|
||||
name = name + ' - computed';
|
||||
else
|
||||
name = name + ' - inline';
|
||||
}
|
||||
else
|
||||
name = actual +' - '+ type;
|
||||
|
||||
testCase.push(name);
|
||||
|
||||
// actual
|
||||
testCase.push(actual);
|
||||
|
||||
// expected
|
||||
if(type.indexOf('computed') != -1 && test.length == 3) {
|
||||
expected = shape + '(' + setUnit(test[2], convert, testUnits) +')';
|
||||
} else {
|
||||
expected = shape + '(' + setUnit(test[1], convert, testUnits) +')';
|
||||
}
|
||||
testCase.push(expected);
|
||||
results.push(testCase);
|
||||
}
|
||||
});
|
||||
}
|
||||
return unique(results);
|
||||
}
|
||||
|
||||
function buildInsetTests(unit1, unit2, type) {
|
||||
var results = new Array();
|
||||
var convert = type == 'computed' ? true : false;
|
||||
|
||||
if(Object.prototype.toString.call( unit1 ) === '[object Array]') {
|
||||
unit1.forEach(function(unit) {
|
||||
insetTests = buildInsetTests(unit, unit2, type);
|
||||
results = results.concat(insetTests);
|
||||
});
|
||||
} else {
|
||||
validInsets.forEach(function(test) {
|
||||
var testCase = [], name, actual, expected;
|
||||
|
||||
name = setUnit(test[0], false, unit1, unit2) +' - '+ type;
|
||||
actual = 'inset(' + setUnit(test[1], convert, unit1, unit2) +')';
|
||||
expected = actual;
|
||||
|
||||
testCase.push(name);
|
||||
testCase.push(actual);
|
||||
testCase.push(expected);
|
||||
|
||||
results.push(testCase);
|
||||
});
|
||||
}
|
||||
return unique(results);
|
||||
}
|
||||
|
||||
function buildPolygonTests(unitSet, type) {
|
||||
var results = new Array();
|
||||
var convert = type == 'computed' ? true : false;
|
||||
|
||||
unitSet.forEach(function(set) {
|
||||
validPolygons.forEach(function(test) {
|
||||
var testCase = [];
|
||||
// name
|
||||
testCase.push(setUnit(test[0], false, set[0], set[1], set[2]) +' - '+ type);
|
||||
// actual
|
||||
testCase.push('polygon(' + setUnit(test[1], false, set[0], set[1], set[2]) +')');
|
||||
// expected
|
||||
testCase.push('polygon(' + setUnit(test[1], convert, set[0], set[1], set[2]) +')');
|
||||
results.push(testCase);
|
||||
});
|
||||
});
|
||||
return unique(results);
|
||||
}
|
||||
|
||||
function buildCalcTests(testCases, type) {
|
||||
var results = new Array();
|
||||
testCases.forEach(function(test){
|
||||
var testCase = [];
|
||||
if(type == 'computed') {
|
||||
testCase.push(test[0] + ' - computed style');
|
||||
testCase.push(test[0]);
|
||||
testCase.push(test[2]);
|
||||
}
|
||||
else {
|
||||
testCase.push(test[0] + ' - inline style');
|
||||
testCase.push(test[0]);
|
||||
testCase.push(test[1]);
|
||||
}
|
||||
testCase.push(type);
|
||||
results.push(testCase)
|
||||
});
|
||||
return unique(results);
|
||||
}
|
||||
|
||||
function unique(tests) {
|
||||
var list = tests.concat();
|
||||
for(var i = 0; i< list.length; ++i) {
|
||||
for(var j = i+1; j < list.length; ++j) {
|
||||
if(list[i][0] === list[j][0])
|
||||
list.splice(j--, 1);
|
||||
}
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
function setUnit(str, convert, unit1, unit2, unit3) {
|
||||
var retStr = str;
|
||||
if(typeof unit1 !== 'undefined') {
|
||||
retStr = retStr.replace(new RegExp('u1', 'g'), unit1);
|
||||
}
|
||||
if(typeof unit2 !== 'undefined') {
|
||||
retStr = retStr.replace(new RegExp("u2", 'g'), unit2);
|
||||
}
|
||||
if(typeof unit3 !== 'undefined') {
|
||||
retStr = retStr.replace(new RegExp("u3", 'g'), unit3);
|
||||
}
|
||||
retStr = convert ? convertToPx(retStr) : retStr;
|
||||
return retStr;
|
||||
}
|
||||
|
||||
function convertToPx(origValue) {
|
||||
|
||||
var valuesToConvert = origValue.match(/[0-9]+(\.[0-9]+)?([a-z]{2,4}|%)/g);
|
||||
if(!valuesToConvert)
|
||||
return origValue;
|
||||
|
||||
var retStr = origValue;
|
||||
for(var i = 0; i < valuesToConvert.length; i++) {
|
||||
var unit = valuesToConvert[i].match(/[a-z]{2,4}|%/).toString();
|
||||
var numberStr = valuesToConvert[i].match(/[0-9]+(\.[0-9]+)?/)[0];
|
||||
|
||||
var number = parseFloat(numberStr);
|
||||
var convertedUnit = 'px';
|
||||
if( typeof number !== 'NaN' )
|
||||
{
|
||||
if (unit == 'in') {
|
||||
number = (96 * number);
|
||||
} else if (unit == 'cm') {
|
||||
number = (37.795275591 * number);
|
||||
} else if (unit == 'mm') {
|
||||
number = (3.779527559 * number);
|
||||
} else if (unit == 'pt') {
|
||||
number = (1.333333333333 * number);
|
||||
} else if (unit == 'pc') {
|
||||
number = (16 * number);
|
||||
} else if (unit == 'em') {
|
||||
number = (16 * number);
|
||||
} else if (unit == 'ex') {
|
||||
number = (7.1796875 * number);
|
||||
} else if (unit == 'ch') {
|
||||
number = (8 * number);
|
||||
} else if (unit == 'rem') {
|
||||
number = (16 * number);
|
||||
} else if (unit == 'vw') {
|
||||
number = ((.01 * window.innerWidth) * number);
|
||||
} else if (unit == 'vh') {
|
||||
number = ((.01 * window.innerHeight) * number);
|
||||
} else if (unit == 'vmin') {
|
||||
number = Math.min( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number;
|
||||
} else if (unit == 'vmax') {
|
||||
number = Math.max( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number;
|
||||
}
|
||||
else {
|
||||
convertedUnit = unit;
|
||||
}
|
||||
number = Math.round(number * 1000) / 1000;
|
||||
var find = valuesToConvert[i];
|
||||
var replace = number.toString() + convertedUnit;
|
||||
retStr = retStr.replace(valuesToConvert[i], number.toString() + convertedUnit);
|
||||
}
|
||||
}
|
||||
return retStr.replace(',,', ',');
|
||||
}
|
||||
|
||||
function roundResultStr(str) {
|
||||
if(Object.prototype.toString.call( str ) !== '[object String]')
|
||||
return str;
|
||||
|
||||
var numbersToRound = str.match(/[0-9]+\.[0-9]+/g);
|
||||
if(!numbersToRound)
|
||||
return str;
|
||||
|
||||
var retStr = str;
|
||||
for(var i = 0; i < numbersToRound.length; i++) {
|
||||
num = parseFloat(numbersToRound[i]);
|
||||
if( !isNaN(num) ) {
|
||||
roundedNum = Math.round(num*1000)/1000;
|
||||
retStr = retStr.replace(numbersToRound[i].toString(), roundedNum.toString());
|
||||
}
|
||||
}
|
||||
|
||||
return retStr;
|
||||
}
|
||||
|
||||
function generateInsetRoundCases(units, testType) {
|
||||
var convert = testType.indexOf('computed') != -1 ? true : false;
|
||||
var testUnit = units;
|
||||
var sizes = [
|
||||
'10' + units,
|
||||
'20' + units,
|
||||
'30' + units,
|
||||
'40' + units
|
||||
];
|
||||
|
||||
function insetRound(value) {
|
||||
return 'inset(10' +testUnit+ ' round ' + value + ')';
|
||||
}
|
||||
|
||||
function serializedInsetRound(lhsValues, rhsValues, convert) {
|
||||
var retStr = '';
|
||||
if(!rhsValues)
|
||||
retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +')';
|
||||
else
|
||||
retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +' / '+ rhsValues +')';
|
||||
|
||||
if(convert)
|
||||
return convertToPx(retStr);
|
||||
|
||||
return retStr;
|
||||
}
|
||||
|
||||
var results = [], left, lhs, right, rhs;
|
||||
for (left = 1; left <= 4; left++) {
|
||||
lhs = sizes.slice(0, left).join(' ');
|
||||
results.push([insetRound(lhs) +' - '+ testType, insetRound(lhs), serializedInsetRound(lhs, null, convert)]);
|
||||
for (right = 1; right <= 4; right++) {
|
||||
rhs = sizes.slice(0, right).join(' ');
|
||||
if(lhs == rhs)
|
||||
results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, null, convert)]);
|
||||
else
|
||||
results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, rhs, convert)]);
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
var validUnits = [
|
||||
"cm","mm","in","pt","pc", // Absolute length units (omitting px b/c we default to that in all tests)
|
||||
"em","ex","ch","rem", // Font relative length units
|
||||
"vw","vh","vmin","vmax" // Viewport percentage units
|
||||
]
|
||||
|
||||
/// [actual, expected]
|
||||
var validPositions = [
|
||||
|
||||
/// [ percent ], [ length ], [ percent | percent ], [ percent | length ], [ length | percent ], [ length | length ]
|
||||
["50%", "50% 50%"],
|
||||
["50u1", "50u1 50%"],
|
||||
["50% 50%", "50% 50%"],
|
||||
["50% 50u1", "50% 50u1"],
|
||||
["50u1 50%", "50u1 50%"],
|
||||
["50u1 50u1", "50u1 50u1"],
|
||||
|
||||
///// [ keyword ], [ keyword keyword ] x 5 keywords
|
||||
["left", "0% 50%"],
|
||||
["top", "50% 0%"],
|
||||
["right", "100% 50%"],
|
||||
["bottom", "50% 100%"],
|
||||
["center", "50% 50%"],
|
||||
|
||||
["left top", "0% 0%"],
|
||||
["left bottom", "0% 100%"],
|
||||
["left center", "0% 50%"],
|
||||
|
||||
["top left", "0% 0%"],
|
||||
["top right", "100% 0%"],
|
||||
["top center", "50% 0%"],
|
||||
|
||||
["right top", "100% 0%"],
|
||||
["right bottom", "100% 100%"],
|
||||
["right center", "100% 50%"],
|
||||
|
||||
["bottom left", "0% 100%"],
|
||||
["bottom right", "100% 100%"],
|
||||
["bottom center", "50% 100%"],
|
||||
|
||||
["center top", "50% 0%"],
|
||||
["center left", "0% 50%"],
|
||||
["center right", "100% 50%"],
|
||||
["center bottom", "50% 100%"],
|
||||
["center center", "50% 50%"],
|
||||
|
||||
////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords
|
||||
["left 50%", "0% 50%"],
|
||||
["left 50u1", "0% 50u1"],
|
||||
|
||||
["50% top", "50% 0%"],
|
||||
["50u1 top", "50u1 0%"],
|
||||
|
||||
["right 80%", "100% 80%"],
|
||||
["right 80u1", "100% 80u1"],
|
||||
|
||||
["70% bottom", "70% 100%"],
|
||||
["70u1 bottom", "70u1 100%"],
|
||||
|
||||
["center 60%", "50% 60%"],
|
||||
["center 60u1", "50% 60u1"],
|
||||
["60% center", "60% 50%"],
|
||||
["60u1 center", "60u1 50%"],
|
||||
|
||||
////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords
|
||||
["center top 50%", "50% 50%"],
|
||||
["center top 50u1", "50% 50u1"],
|
||||
["center left 50%", "50% 50%"],
|
||||
["center left 50u1", "50u1 50%"],
|
||||
["center right 70%", "30% 50%"],
|
||||
["center right 70u1", "right 70u1 top 50%"],
|
||||
["center bottom 70%", "50% 30%"],
|
||||
["center bottom 70u1", "left 50% bottom 70u1"],
|
||||
|
||||
["left top 50%", "0% 50%"],
|
||||
["left top 50u1", "0% 50u1"],
|
||||
["left bottom 70%", "0% 30%"],
|
||||
["left bottom 70u1", "left 0% bottom 70u1"],
|
||||
|
||||
["top left 50%", "50% 0%"],
|
||||
["top left 50u1", "50u1 0%"],
|
||||
["top right 70%", "30% 0%"],
|
||||
["top right 70u1", "right 70u1 top 0%"],
|
||||
|
||||
["bottom left 50%", "50% 100%"],
|
||||
["bottom left 50u1", "50u1 100%"],
|
||||
["bottom right 70%", "30% 100%"],
|
||||
["bottom right 70u1", "right 70u1 top 100%"],
|
||||
|
||||
["right bottom 70%", "100% 30%"],
|
||||
["right bottom 70u1", "left 100% bottom 70u1"],
|
||||
["right top 50%", "100% 50%"],
|
||||
["right top 50u1", "100% 50u1"],
|
||||
|
||||
////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords
|
||||
["left 50% center", "50% 50%"],
|
||||
["left 50u1 center", "50u1 50%"],
|
||||
["left 50% top", "50% 0%"],
|
||||
["left 50u1 top", "50u1 0%"],
|
||||
["left 50% bottom", "50% 100%"],
|
||||
["left 50u1 bottom", "50u1 100%"],
|
||||
|
||||
["top 50% center", "50% 50%"],
|
||||
["top 50u1 center", "50% 50u1"],
|
||||
["top 50% left", "0% 50%"],
|
||||
["top 50u1 left", "0% 50u1"],
|
||||
["top 50% right", "100% 50%"],
|
||||
["top 50u1 right", "100% 50u1"],
|
||||
|
||||
["bottom 70% center", "50% 30%"],
|
||||
["bottom 70u1 center", "left 50% bottom 70u1"],
|
||||
["bottom 70% left", "0% 30%"],
|
||||
["bottom 70u1 left", "left 0% bottom 70u1"],
|
||||
["bottom 70% right", "100% 30%"],
|
||||
["bottom 70u1 right", "left 100% bottom 70u1"],
|
||||
|
||||
["right 80% center", "20% 50%"],
|
||||
["right 80u1 center", "right 80u1 top 50%"],
|
||||
["right 80% bottom", "20% 100%"],
|
||||
["right 80u1 bottom", "right 80u1 top 100%"],
|
||||
["right 80% top", "20% 0%"],
|
||||
["right 80u1 top", "right 80u1 top 0%"],
|
||||
|
||||
////// [ keyword percent | keyword percent], [ keyword percent | keyword length],
|
||||
////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords
|
||||
["left 50% top 50%", "50% 50%"],
|
||||
["left 50% top 50u1", "50% 50u1"],
|
||||
["left 50% bottom 70%", "50% 30%"],
|
||||
["left 50% bottom 70u1", "left 50% bottom 70u1"],
|
||||
["left 50u1 top 50%", "50u1 50%"],
|
||||
["left 50u1 top 50u1", "50u1 50u1"],
|
||||
["left 50u1 bottom 70%", "50u1 30%"],
|
||||
["left 50u1 bottom 70u1", "left 50u1 bottom 70u1"],
|
||||
|
||||
["top 50% left 50%", "50% 50%"],
|
||||
["top 50% left 50u1", "50u1 50%"],
|
||||
["top 50% right 80%", "20% 50%"],
|
||||
["top 50% right 80u1", "right 80u1 top 50%"],
|
||||
["top 50u1 left 50%", "50% 50u1"],
|
||||
["top 50u1 left 50u1", "50u1 50u1"],
|
||||
["top 50u1 right 80%", "20% 50u1"],
|
||||
["top 50u1 right 80u1", "right 80u1 top 50u1"],
|
||||
|
||||
["bottom 70% left 50%", "50% 30%"],
|
||||
["bottom 70% left 50u1", "50u1 30%"],
|
||||
["bottom 70% right 80%", "20% 30%"],
|
||||
["bottom 70% right 80u1", "right 80u1 top 30%"],
|
||||
["bottom 70u1 left 50%", "left 50% bottom 70u1"],
|
||||
["bottom 70u1 left 50u1", "left 50u1 bottom 70u1"],
|
||||
["bottom 70u1 right 80%", "left 20% bottom 70u1"],
|
||||
["bottom 70u1 right 80u1", "right 80u1 bottom 70u1"],
|
||||
|
||||
["right 80% top 50%", "20% 50%"],
|
||||
["right 80% top 50u1", "20% 50u1"],
|
||||
["right 80% bottom 70%", "20% 30%"],
|
||||
["right 80% bottom 70u1", "left 20% bottom 70u1"],
|
||||
["right 80u1 top 50%", "right 80u1 top 50%"],
|
||||
["right 80u1 top 50u1", "right 80u1 top 50u1"],
|
||||
["right 80u1 bottom 70%", "right 80u1 top 30%"],
|
||||
["right 80u1 bottom 70u1", "right 80u1 bottom 70u1"],
|
||||
];
|
||||
|
||||
var invalidPositions = [
|
||||
////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords
|
||||
"50% left",
|
||||
"50px left",
|
||||
"top 50%",
|
||||
"80% right",
|
||||
"80px right",
|
||||
"bottom 70%",
|
||||
"bottom 70px",
|
||||
|
||||
////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords
|
||||
"center center 60%",
|
||||
"center center 60px",
|
||||
|
||||
"left center 60%",
|
||||
"left center 60px",
|
||||
"left right 80%",
|
||||
"left right 80px",
|
||||
"left left 50%",
|
||||
"left left 50px",
|
||||
|
||||
"top center 60%",
|
||||
"top center 60px",
|
||||
"top bottom 80%",
|
||||
"top bottom 80px",
|
||||
"top top 50%",
|
||||
"top top 50px",
|
||||
|
||||
"bottom center 60%",
|
||||
"bottom center 60px",
|
||||
"bottom top 50%",
|
||||
"bottom top 50px",
|
||||
"bottom bottom 50%",
|
||||
"bottom bottom 50px",
|
||||
|
||||
"right center 60%",
|
||||
"right center 60px",
|
||||
"right left 50%",
|
||||
"right left 50px",
|
||||
"right right 70%",
|
||||
"right right 70px",
|
||||
|
||||
////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords
|
||||
"center 60% top",
|
||||
"center 60px top",
|
||||
"center 60% bottom",
|
||||
"center 60px bottom",
|
||||
"center 60% left",
|
||||
"center 60px left",
|
||||
"center 60% right",
|
||||
"center 60px right",
|
||||
"center 60% center",
|
||||
"center 60px center",
|
||||
|
||||
"left 50% right",
|
||||
"left 50px right",
|
||||
"left 50% left",
|
||||
"left 50px left",
|
||||
|
||||
"top 50% bottom",
|
||||
"top 50px bottom",
|
||||
"top 50% top",
|
||||
"top 50px top",
|
||||
|
||||
"bottom 70% top",
|
||||
"bottom 70px top",
|
||||
"bottom 70% bottom",
|
||||
"bottom 70px bottom",
|
||||
|
||||
"right 80% left",
|
||||
"right 80px left",
|
||||
|
||||
////// [ keyword percent | keyword percent], [ keyword percent | keyword length],
|
||||
////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords
|
||||
"center 60% top 50%",
|
||||
"center 60% top 50px",
|
||||
"center 60% bottom 70%",
|
||||
"center 60% bottom 70px",
|
||||
"center 60% left 50%",
|
||||
"center 60% left 50px",
|
||||
"center 60% right 70%",
|
||||
"center 60% right 70px",
|
||||
"center 60% center 65%",
|
||||
"center 60% center 65px",
|
||||
"center 60px top 50%",
|
||||
"center 60px top 50px",
|
||||
"center 60px bottom 70%",
|
||||
"center 60px bottom 70px",
|
||||
"center 60px left 50%",
|
||||
"center 60px left 50px",
|
||||
"center 60px right 70%",
|
||||
"center 60px right 70px",
|
||||
"center 60px center 65%",
|
||||
"center 60px center 65px",
|
||||
|
||||
"left 50% center 60%",
|
||||
"left 50% center 60px",
|
||||
"left 50% right 80%",
|
||||
"left 50% right 80px",
|
||||
"left 50% left 50%",
|
||||
"left 50% left 50px",
|
||||
"left 50px center 60%",
|
||||
"left 50px center 60px",
|
||||
"left 50px right 80%",
|
||||
"left 50px right 80px",
|
||||
"left 50px left 50%",
|
||||
"left 50px left 50px",
|
||||
|
||||
"top 50% center 60%",
|
||||
"top 50% center 60px",
|
||||
"top 50% bottom 50%",
|
||||
"top 50% bottom 50px",
|
||||
"top 50% top 50%",
|
||||
"top 50% top 50px",
|
||||
"top 50px center 60%",
|
||||
"top 50px center 60px",
|
||||
"top 50px bottom 70%",
|
||||
"top 50px bottom 70px",
|
||||
"top 50px top 50%",
|
||||
"top 50px top 50px",
|
||||
|
||||
"bottom 70% center 60%",
|
||||
"bottom 70% center 60px",
|
||||
"bottom 70% top 50%",
|
||||
"bottom 70% top 50px",
|
||||
"bottom 70% bottom 50%",
|
||||
"bottom 70% bottom 50px",
|
||||
"bottom 70px center 60%",
|
||||
"bottom 70px center 60px",
|
||||
"bottom 70px top 50%",
|
||||
"bottom 70px top 50px",
|
||||
"bottom 70px bottom 50%",
|
||||
"bottom 70px bottom 50px",
|
||||
|
||||
"right 80% center 60%",
|
||||
"right 80% center 60px",
|
||||
"right 80% left 50%",
|
||||
"right 80% left 50px",
|
||||
"right 80% right 85%",
|
||||
"right 80% right 85px",
|
||||
"right 80px center 60%",
|
||||
"right 80px center 60px",
|
||||
"right 80px left 50%",
|
||||
"right 80px left 50px",
|
||||
"right 80px right 85%",
|
||||
"right 80px right 85px"
|
||||
];
|
||||
|
||||
// valid radii values for circle + ellipse
|
||||
// [value, expected_inline, [expected_computed?]]
|
||||
var validCircleRadii = [
|
||||
['', 'at 50% 50%', 'at 50% 50%'],
|
||||
['50u1', '50u1 at 50% 50%'],
|
||||
['50%', '50% at 50% 50%'],
|
||||
['closest-side', 'at 50% 50%'],
|
||||
['farthest-side', 'farthest-side at 50% 50%']
|
||||
]
|
||||
var validEllipseRadii = [
|
||||
['', 'at 50% 50%', 'at 50% 50%'],
|
||||
['50u1', '50u1 at 50% 50%', '50u1 at 50% 50%'],
|
||||
['50%', '50% at 50% 50%', '50% at 50% 50%'],
|
||||
['closest-side', 'at 50% 50%', 'at 50% 50%'],
|
||||
['farthest-side', 'farthest-side at 50% 50%', 'farthest-side at 50% 50%'],
|
||||
['50u1 100u1', '50u1 100u1 at 50% 50%'],
|
||||
['100u1 100px', '100u1 100px at 50% 50%'],
|
||||
['25% 50%', '25% 50% at 50% 50%'],
|
||||
['50u1 25%', '50u1 25% at 50% 50%'],
|
||||
['25% 50u1', '25% 50u1 at 50% 50%'],
|
||||
['25% closest-side', '25% at 50% 50%'],
|
||||
['25u1 closest-side', '25u1 at 50% 50%'],
|
||||
['closest-side 75%', 'closest-side 75% at 50% 50%'],
|
||||
['closest-side 75u1', 'closest-side 75u1 at 50% 50%'],
|
||||
['25% farthest-side', '25% farthest-side at 50% 50%'],
|
||||
['25u1 farthest-side', '25u1 farthest-side at 50% 50%'],
|
||||
['farthest-side 75%', 'farthest-side 75% at 50% 50%'],
|
||||
['farthest-side 75u1', 'farthest-side 75u1 at 50% 50%'],
|
||||
['closest-side closest-side', 'at 50% 50%'],
|
||||
['farthest-side farthest-side', 'farthest-side farthest-side at 50% 50%'],
|
||||
['closest-side farthest-side', 'closest-side farthest-side at 50% 50%'],
|
||||
['farthest-side closest-side', 'farthest-side at 50% 50%']
|
||||
]
|
||||
|
||||
var validInsets = [
|
||||
["One arg - u1", "10u1"],
|
||||
["One arg - u2", "10u2"],
|
||||
["Two args - u1 u1", "10u1 20u1"],
|
||||
["Two args - u1 u2", "10u1 20u2"],
|
||||
["Two args - u2 u1", "10u2 20u1"],
|
||||
["Two args - u2 u2", "10u2 20u2"],
|
||||
["Three args - u1 u1 u1", "10u1 20u1 30u1"],
|
||||
["Three args - u1 u1 u2", "10u1 20u1 30u2"],
|
||||
["Three args - u1 u2 u1", "10u1 20u2 30u1"],
|
||||
["Three args - u1 u2 u2 ", "10u1 20u2 30u2"],
|
||||
["Three args - u2 u1 u1", "10u2 20u1 30u1"],
|
||||
["Three args - u2 u1 u2 ", "10u2 20u1 30u2"],
|
||||
["Three args - u2 u2 u1 ", "10u2 20u2 30u1"],
|
||||
["Three args - u2 u2 u2 ","10u2 20u2 30u2"],
|
||||
["Four args - u1 u1 u1 u1", "10u1 20u1 30u1 40u1"],
|
||||
["Four args - u1 u1 u1 u2", "10u1 20u1 30u1 40u2"],
|
||||
["Four args - u1 u1 u2 u1", "10u1 20u1 30u2 40u1"],
|
||||
["Four args - u1 u1 u2 u2", "10u1 20u1 30u2 40u2"],
|
||||
["Four args - u1 u2 u1 u1", "10u1 20u2 30u1 40u1"],
|
||||
["Four args - u1 u2 u1 u2", "10u1 20u2 30u1 40u2"],
|
||||
["Four args - u1 u2 u2 u1", "10u1 20u2 30u2 40u1"],
|
||||
["Four args - u1 u2 u2 u2", "10u1 20u2 30u2 40u2"],
|
||||
["Four args - u2 u1 u1 u1", "10u2 20u1 30u1 40u1"],
|
||||
["Four args - u2 u1 u1 u2", "10u2 20u1 30u1 40u2"],
|
||||
["Four args - u2 u1 u2 u1", "10u2 20u1 30u2 40u1"],
|
||||
["Four args - u2 u1 u2 u2", "10u2 20u1 30u2 40u2"],
|
||||
["Four args - u2 u2 u1 u1", "10u2 20u2 30u1 40u1"],
|
||||
["Four args - u2 u2 u1 u2", "10u2 20u2 30u1 40u2"],
|
||||
["Four args - u2 u2 u2 u1", "10u2 20u2 30u2 40u1"],
|
||||
["Four args - u2 u2 u2 u2", "10u2 20u2 30u2 40u2"]
|
||||
]
|
||||
|
||||
var validPolygons = [
|
||||
["One vertex - u1 u1", "10u1 20u1"],
|
||||
["One vertex - u1 u2", "10u1 20u2"],
|
||||
["Two vertices - u1 u1, u1 u1", "10u1 20u1, 30u1 40u1"],
|
||||
["Two vertices - u1 u1, u2 u2", "10u1 20u1, 30u2 40u2"],
|
||||
["Two vertices - u2 u2, u1 u1", "10u2 20u2, 30u1 40u1"],
|
||||
["Two vertices - u1 u2, u2 u1", "10u1 20u2, 30u2 40u1"],
|
||||
["Three vertices - u1 u1, u1 u1, u1 u1", "10u1 20u1, 30u1 40u1, 50u1 60u1"],
|
||||
["Three vertices - u2 u2, u2 u2, u2 u2", "10u2 20u2, 30u2 40u2, 50u2 60u2"],
|
||||
["Three vertices - u3 u3, u3 u3, u3 u3", "10u3 20u3, 30u3 40u3, 50u3 60u3"],
|
||||
["Three vertices - u1 u1, u2 u2, u3 u3", "10u1 20u1, 30u2 40u2, 50u3 60u3"],
|
||||
["Three vertices - u3 u3, u1, u1, u2 u2", "10u3 20u3, 30u1 40u1, 50u2 60u2"],
|
||||
]
|
||||
|
||||
// [test value, expected property value, expected computed style]
|
||||
var calcTestValues = [
|
||||
["calc(10in)", "calc(10in)", "960px"],
|
||||
["calc(10in + 20px)", "calc(980px)", "980px"],
|
||||
["calc(30%)", "calc(30%)", "30%"],
|
||||
["calc(100%/4)", "calc(25%)", "25%"],
|
||||
["calc(25%*3)", "calc(75%)", "75%"],
|
||||
// These following two test cases represent an either/or situation in the spec
|
||||
// computed value is always supposed to be, at most, a tuple of a length and a percentage.
|
||||
// the computed value of a ‘calc()’ expression can be represented as either a number or a tuple
|
||||
// of a dimension and a percentage.
|
||||
// http://www.w3.org/TR/css3-values/#calc-notation
|
||||
["calc(25%*3 - 10in)", "calc(75% - 10in)", ["calc(75% - 960px)", "calc(-960px + 75%)"]],
|
||||
["calc((12.5%*6 + 10in) / 4)", "calc((75% + 10in) / 4)", ["calc((75% + 960px) / 4)", "calc(240px + 18.75%)"]]
|
||||
]
|
||||
|
||||
return {
|
||||
testInlineStyle: testInlineStyle,
|
||||
testComputedStyle: testComputedStyle,
|
||||
testShapeMarginInlineStyle: testShapeMarginInlineStyle,
|
||||
testShapeMarginComputedStyle: testShapeMarginComputedStyle,
|
||||
testShapeThresholdInlineStyle: testShapeThresholdInlineStyle,
|
||||
testShapeThresholdComputedStyle: testShapeThresholdComputedStyle,
|
||||
buildTestCases: buildTestCases,
|
||||
buildRadiiTests: buildRadiiTests,
|
||||
buildPositionTests: buildPositionTests,
|
||||
buildInsetTests: buildInsetTests,
|
||||
buildPolygonTests: buildPolygonTests,
|
||||
generateInsetRoundCases: generateInsetRoundCases,
|
||||
buildCalcTests: buildCalcTests,
|
||||
validUnits: validUnits,
|
||||
calcTestValues: calcTestValues,
|
||||
roundResultStr: roundResultStr
|
||||
}
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 222 B |
Binary file not shown.
|
After Width: | Height: | Size: 231 B |
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1">
|
||||
<path fill="#006400" d="M50,0h50c0,33.3,0,66.7,0,100H50V0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 194 B |
Binary file not shown.
|
After Width: | Height: | Size: 320 B |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" version="1.1" x="0px" y="0px">
|
||||
<path fill="#006400" d="M50,0h50c0,33.3,0,66.7,0,100H50V0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 211 B |
|
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px">
|
||||
<g>
|
||||
<path fill="#AED8E6" d="M167.405,164.386C186.707,183.974,180,200,152.5,200H50c-27.5,0-50-22.5-50-50V44.5 C0,17,15.792,10.526,35.094,30.114L167.405,164.386z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 290 B |
|
|
@ -0,0 +1,26 @@
|
|||
function approxShapeTest(testId, linePrefix, epsilon, lineOffsets) {
|
||||
var isPositioned = { 'relative': true, 'fixed': true, 'absolute': true, 'sticky': true },
|
||||
loops = 0,
|
||||
testDiv = document.getElementById(testId),
|
||||
testOffset = isPositioned[getComputedStyle(testDiv).position] ? 0 : testDiv.offsetLeft,
|
||||
firstLine = document.getElementById(linePrefix + '0');
|
||||
|
||||
function runTest() {
|
||||
if (firstLine.offsetLeft == testOffset) {
|
||||
// wait for the shape image to load and layout to happen
|
||||
if (loops > 100)
|
||||
assert_unreached("Giving up waiting for shape layout to happen!");
|
||||
else
|
||||
loops++;
|
||||
window.setTimeout(runTest, 5);
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = 0; i < lineOffsets.length; i++) {
|
||||
var line = document.getElementById(linePrefix + i);
|
||||
assert_approx_equals(line.offsetLeft, lineOffsets[i] + testOffset, epsilon, 'Line ' + i + ' is positioned properly');
|
||||
}
|
||||
done();
|
||||
}
|
||||
runTest();
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 78 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 85 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Add table
Add a link
Reference in a new issue