Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

This commit is contained in:
James Graham 2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions

View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Box Sizing - Border-Box with specified width</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." />
<style type="text/css"><![CDATA[
.container {
width: 300px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: border-box;
width: 50%;
z-index: 1;
float: left;
border: 5px solid black;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Box Sizing - Border-Box with specified width</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." />
<style type="text/css"><![CDATA[
.container {
width: 300px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: border-box;
width: 50%;
z-index: 1;
float: left;
border: 5px solid black;
padding: 0px 10px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View file

@ -0,0 +1,46 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Box Sizing - Border-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge." />
<style type="text/css"><![CDATA[
.container {
width: 300px;
height: 400px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: border-box;
width: 50%;
height: 100%;
z-index: 1;
float: left;
border: 5px solid black;
padding: 25px 10px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View file

@ -0,0 +1,49 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Box Sizing - Border-Box with min/max width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: border-box should make the element's (length) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge." />
<style type="text/css"><![CDATA[
.container {
min-width: 500px;
max-width: 700px;
min-height: 70px;
max-height: 90px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: border-box;
min-width: 250px;
max-width: 350px;
min-height: 70px;
max-height: 90px;
z-index: 1;
float: left;
border: 5px solid black;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Box Sizing - Content-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge." />
<style type="text/css"><![CDATA[
.container {
width: 300px;
height: 110px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: content-box;
width: 50%;
height: 100%;
z-index: 1;
float: left;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Box Sizing - Content-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: content-box should make the element's (calc) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge." />
<style type="text/css"><![CDATA[
.container {
width: 300px;
height: 100px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: content-box;
width: calc(50% - 10px);
height: calc(100% - 10px);
z-index: 1;
float: left;
padding: 5px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Box Sizing - Content-Box with min/max width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge." />
<style type="text/css"><![CDATA[
.container {
min-width: 500px;
max-width: 700px;
height: 90px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: content-box;
width: 50%;
height: 100%;
z-index: 1;
float: left;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Box Sizing - Padding-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: padding-box should make the element's (percentage) width be the distance from the left padding edge to the right padding edge." />
<style type="text/css"><![CDATA[
.container {
width: 300px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: padding-box;
width: 50%;
z-index: 1;
float: left;
padding: 0px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Box Sizing - Padding-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: padding-box should make the element's (percentage) width be the distance from the left padding edge to the right padding edge and the height be the distance from the top padding edge to the bottom padding edge." />
<style type="text/css"><![CDATA[
.container {
width: 300px;
height: 400px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: padding-box;
width: 50%;
height: 100%;
z-index: 1;
float: left;
padding: 25px 10px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View file

@ -0,0 +1,49 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Box Sizing - Padding-Box with min/max width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: padding-box should make the element's (calc) width be the distance from the left padding edge to the right padding edge and the height be the distance from the top padding edge to the bottom padding edge." />
<style type="text/css"><![CDATA[
.container {
min-width: 500px;
max-width: 700px;
min-height: 70px;
max-height: 90px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: padding-box;
min-width: 250px;
max-width: 350px;
min-height: 70px;
max-height: 90px;
z-index: 1;
float: left;
padding: 5px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View file

@ -0,0 +1,156 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
<link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author" />
<link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta content="image" name="flags" />
<meta name="assert" content="All images should be sized at 75px x 75px, with 5px of padding around each." />
<!--
This test is derived from replaced-min-max-001, part of the W3C CSS 2.1
test suite.
-->
<style type="text/css">
p {
display: inline-block;
background-color: white;
padding: 0px 0px;
margin: 0px 0px;
}
.with-padding {
padding: 5px 5px;
box-sizing: padding-box;
}
#img1 {
min-width: 70px;
max-width: 115px;
min-height: 55px;
max-height: 130px;
}
#img2 {
max-width: 85px;
min-height: 70px;
}
#img3 {
max-width: 85px;
min-height: 85px;
}
#img4 {
min-width: 85px;
max-height: 110px;
}
#img5 {
min-width: 85px;
max-height: 85px;
}
#img6 {
min-width: 70px;
max-height: 85px;
}
#img7 {
min-width: 85px;
max-height: 85px;
}
#img8 {
max-width: 110px;
min-height: 85px;
}
#img9 {
max-width: 85px;
min-height: 85px;
}
#img10 {
min-width: 85px;
max-width: 160px;
max-height: 85px;
}
#img11 {
min-width: 35px;
max-width: 235px;
max-height: 85px;
}
#img12 {
max-width: 85px;
min-height: 85px;
max-height: 160px;
}
#img13 {
max-width: 85px;
min-height: 35px;
max-height: 235px;
}
#img14 {
min-width: 60px;
max-width: 110px;
min-height: 85px;
}
#img15 {
min-width: 65px;
max-width: 85px;
min-height: 85px;
}
#img16 {
min-width: 85px;
min-height: 60px;
max-height: 110px;
}
#img17 {
min-width: 85px;
min-height: 65px;
max-height: 85px;
}
#img18 {
min-width: 85px;
max-height: 85px;
}
#img19 {
max-width: 85px;
min-height: 85px;
}
</style>
</head>
<body>
<div>All rectangles should be the same size.</div>
<p><img id="img0" class="with-padding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0" /></p>
<p><img id="img1" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png" /></p>
<p><img id="img2" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png" /></p>
<p><img id="img3" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png" /></p>
<p><img id="img4" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png" /></p>
<p><img id="img5" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png" /></p>
<p><img id="img6" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png" /></p>
<p><img id="img7" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png" /></p>
<p><img id="img8" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png" /></p>
<p><img id="img9" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png" /></p>
<p><img id="img10" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png" /></p>
<p><img id="img11" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png" /></p>
<p><img id="img12" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png" /></p>
<p><img id="img13" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png" /></p>
<p><img id="img14" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png" /></p>
<p><img id="img15" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png" /></p>
<p><img id="img16" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png" /></p>
<p><img id="img17" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png" /></p>
<p><img id="img18" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png" /></p>
<p><img id="img19" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png" /></p>
</body>
</html>

View file

@ -0,0 +1,157 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
<link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author" />
<link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta content="image" name="flags" />
<meta name="assert" content="All images should be sized at 75px x 75px, with 5px of padding and 5px of blue border around each." />
<!--
This test is derived from replaced-min-max-001, part of the W3C CSS 2.1
test suite.
-->
<style type="text/css">
p {
display: inline-block;
background-color: white;
padding: 0px 0px;
margin: 0px 0px;
}
.with-borderpadding {
padding: 5px 5px;
border: 5px solid blue;
box-sizing: border-box;
}
#img1 {
min-width: 80px;
max-width: 125px;
min-height: 65px;
max-height: 140px;
}
#img2 {
max-width: 95px;
min-height: 80px;
}
#img3 {
max-width: 95px;
min-height: 95px;
}
#img4 {
min-width: 95px;
max-height: 120px;
}
#img5 {
min-width: 95px;
max-height: 95px;
}
#img6 {
min-width: 80px;
max-height: 95px;
}
#img7 {
min-width: 95px;
max-height: 95px;
}
#img8 {
max-width: 120px;
min-height: 95px;
}
#img9 {
max-width: 95px;
min-height: 95px;
}
#img10 {
min-width: 95px;
max-width: 170px;
max-height: 95px;
}
#img11 {
min-width: 45px;
max-width: 245px;
max-height: 95px;
}
#img12 {
max-width: 95px;
min-height: 95px;
max-height: 170px;
}
#img13 {
max-width: 95px;
min-height: 45px;
max-height: 245px;
}
#img14 {
min-width: 70px;
max-width: 120px;
min-height: 95px;
}
#img15 {
min-width: 75px;
max-width: 95px;
min-height: 95px;
}
#img16 {
min-width: 95px;
min-height: 70px;
max-height: 120px;
}
#img17 {
min-width: 95px;
min-height: 75px;
max-height: 95px;
}
#img18 {
min-width: 95px;
max-height: 95px;
}
#img19 {
max-width: 95px;
min-height: 95px;
}
</style>
</head>
<body>
<div>All rectangles should be the same size.</div>
<p><img id="img0" class="with-borderpadding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0" /></p>
<p><img id="img1" class="with-borderpadding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png" /></p>
<p><img id="img2" class="with-borderpadding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png" /></p>
<p><img id="img3" class="with-borderpadding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png" /></p>
<p><img id="img4" class="with-borderpadding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png" /></p>
<p><img id="img5" class="with-borderpadding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png" /></p>
<p><img id="img6" class="with-borderpadding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png" /></p>
<p><img id="img7" class="with-borderpadding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png" /></p>
<p><img id="img8" class="with-borderpadding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png" /></p>
<p><img id="img9" class="with-borderpadding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png" /></p>
<p><img id="img10" class="with-borderpadding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png" /></p>
<p><img id="img11" class="with-borderpadding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png" /></p>
<p><img id="img12" class="with-borderpadding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png" /></p>
<p><img id="img13" class="with-borderpadding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png" /></p>
<p><img id="img14" class="with-borderpadding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png" /></p>
<p><img id="img15" class="with-borderpadding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png" /></p>
<p><img id="img16" class="with-borderpadding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png" /></p>
<p><img id="img17" class="with-borderpadding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png" /></p>
<p><img id="img18" class="with-borderpadding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png" /></p>
<p><img id="img19" class="with-borderpadding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png" /></p>
</body>
</html>

View file

@ -0,0 +1,155 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
<link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author" />
<link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta content="image" name="flags" />
<meta name="assert" content="All images should be sized at 75px x 75px." />
<!--
This test is derived from replaced-min-max-001, part of the W3C CSS 2.1
test suite.
-->
<style type="text/css">
p {
display: inline-block;
background-color: white;
padding: 0px 0px;
margin: 0px 0px;
}
.content-box {
box-sizing: content-box;
}
#img1 {
min-width: 60px;
max-width: 125px;
min-height: 45px;
max-height: 120px;
}
#img2 {
max-width: 75px;
min-height: 60px;
}
#img3 {
max-width: 75px;
min-height: 75px;
}
#img4 {
min-width: 75px;
max-height: 100px;
}
#img5 {
min-width: 75px;
max-height: 75px;
}
#img6 {
min-width: 60px;
max-height: 75px;
}
#img7 {
min-width: 75px;
max-height: 75px;
}
#img8 {
max-width: 100px;
min-height: 75px;
}
#img9 {
max-width: 75px;
min-height: 75px;
}
#img10 {
min-width: 75px;
max-width: 150px;
max-height: 75px;
}
#img11 {
min-width: 25px;
max-width: 225px;
max-height: 75px;
}
#img12 {
max-width: 75px;
min-height: 75px;
max-height: 150px;
}
#img13 {
max-width: 75px;
min-height: 25px;
max-height: 225px;
}
#img14 {
min-width: 50px;
max-width: 100px;
min-height: 75px;
}
#img15 {
min-width: 55px;
max-width: 75px;
min-height: 75px;
}
#img16 {
min-width: 75px;
min-height: 50px;
max-height: 100px;
}
#img17 {
min-width: 75px;
min-height: 55px;
max-height: 75px;
}
#img18 {
min-width: 75px;
max-height: 75px;
}
#img19 {
max-width: 75px;
min-height: 75px;
}
</style>
</head>
<body>
<div>All rectangles should be the same size.</div>
<p><img id="img0" class="content-box" src="support/replaced-min-max.png" alt="FAIL" title="Test 0" /></p>
<p><img id="img1" class="content-box" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png" /></p>
<p><img id="img2" class="content-box" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png" /></p>
<p><img id="img3" class="content-box" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png" /></p>
<p><img id="img4" class="content-box" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png" /></p>
<p><img id="img5" class="content-box" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png" /></p>
<p><img id="img6" class="content-box" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png" /></p>
<p><img id="img7" class="content-box" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png" /></p>
<p><img id="img8" class="content-box" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png" /></p>
<p><img id="img9" class="content-box" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png" /></p>
<p><img id="img10" class="content-box" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png" /></p>
<p><img id="img11" class="content-box" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png" /></p>
<p><img id="img12" class="content-box" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png" /></p>
<p><img id="img13" class="content-box" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png" /></p>
<p><img id="img14" class="content-box" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png" /></p>
<p><img id="img15" class="content-box" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png" /></p>
<p><img id="img16" class="content-box" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png" /></p>
<p><img id="img17" class="content-box" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png" /></p>
<p><img id="img18" class="content-box" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png" /></p>
<p><img id="img19" class="content-box" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png" /></p>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!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><meta charset="utf-8" />
<title>CSS Basic User Interface Test: caret-color</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#caret-color" rel="help" title="7.2.1. Coloring the insertion caret: caret-color" />
<meta content="" name="flags" />
<meta content="Test checks that caret-color can be set on a textarea" name="assert" />
<style>
#test {
font-size: 2em;
font-weight: bold;
caret-color:#070;
width: 10em;
}
}
</style>
</head><body>
<p>Test passes if, when the cursor is placed in the textarea for editing, the caret is green.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<div id="container">
<textarea id="test">Textarea with random text</textarea>
</div>
</body></html>

View file

@ -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><meta charset="utf-8" />
<title>CSS Basic User Interface Test: caret-color is not inherited</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#caret-color" rel="help" title="7.2.1. Coloring the insertion caret: caret-color" />
<meta content="" name="flags" />
<meta content="Test checks that caret-color value does not inherit" name="assert" />
<style>
#container {
caret-color:red;
}
#test1 {
caret-color:#070;
}
textarea {
font-size: 2em;
font-weight: bold;
width: 10em;
}
}
</style>
</head><body>
<p>Test passes if, when the cursor is placed in the first textarea for editing, the caret is green and then,
when placed in the second textarea, the caret is not red.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<textarea id="test1">First textarea</textarea>
<div id="container">
<textarea id="test2">Second textarea</textarea>
</div>
</body></html>

View file

@ -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><meta charset="utf-8" />
<title>CSS Basic User Interface Test: caret-color auto</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#caret-color" rel="help" title="7.2.1. Coloring the insertion caret: caret-color" />
<meta content="" name="flags" />
<meta content="Test checks that caret-color: auto resolves to currentColor" name="assert" />
<style>
#container {
color: green;
}
#test {
font-size: 2em;
font-weight: bold;
color:currentColor;
caret-color:auto;
width: 10em;
}
}
</style>
</head><body>
<p>Test passes if, when the cursor is placed in the textarea for editing, the caret and the text are both green.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<div id="container">
<textarea id="test">Textarea must be green</textarea>
</div>
</body></html>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction - CSS Basic User Interface Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Basic User Interface Module Level 3 CR Test Suite</h1>
<h2>Introduction (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1">+</a>
<a href="http://www.w3.org/TR/css3-ui/#intro">1 Introduction</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.1">+</a>
<a href="http://www.w3.org/TR/css3-ui/#purpose">1.1 Purpose</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Module Interactions - CSS Basic User Interface Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Basic User Interface Module Level 3 CR Test Suite</h1>
<h2>Module Interactions (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="http://www.w3.org/TR/css3-ui/#interaction">2 Module Interactions</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,197 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model addition - CSS Basic User Interface Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Basic User Interface Module Level 3 CR Test Suite</h1>
<h2>Box Model addition (13 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<a href="http://www.w3.org/TR/css3-ui/#box-model">3 Box Model addition</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="http://www.w3.org/TR/css3-ui/#box-sizing">3.1 box-sizing property</a></th></tr>
<!-- 13 tests -->
<tr id="box-sizing-border-box-001-3.1" class="primary">
<td><strong>
<a href="box-sizing-border-box-001.xht">box-sizing-border-box-001</a></strong></td>
<td></td>
<td></td>
<td>Box Sizing - Border-Box with specified width
<ul class="assert">
<li>box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-border-box-002-3.1" class="primary">
<td><strong>
<a href="box-sizing-border-box-002.xht">box-sizing-border-box-002</a></strong></td>
<td></td>
<td></td>
<td>Box Sizing - Border-Box with specified width
<ul class="assert">
<li>box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-border-box-003-3.1" class="primary">
<td><strong>
<a href="box-sizing-border-box-003.xht">box-sizing-border-box-003</a></strong></td>
<td></td>
<td></td>
<td>Box Sizing - Border-Box with specified width/height
<ul class="assert">
<li>box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-border-box-004-3.1" class="primary">
<td><strong>
<a href="box-sizing-border-box-004.xht">box-sizing-border-box-004</a></strong></td>
<td></td>
<td></td>
<td>Box Sizing - Border-Box with min/max width/height
<ul class="assert">
<li>box-sizing: border-box should make the element's (length) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-content-box-001-3.1" class="primary">
<td><strong>
<a href="box-sizing-content-box-001.xht">box-sizing-content-box-001</a></strong></td>
<td></td>
<td></td>
<td>Box Sizing - Content-Box with specified width/height
<ul class="assert">
<li>box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-content-box-002-3.1" class="primary">
<td><strong>
<a href="box-sizing-content-box-002.xht">box-sizing-content-box-002</a></strong></td>
<td></td>
<td></td>
<td>Box Sizing - Content-Box with specified width/height
<ul class="assert">
<li>box-sizing: content-box should make the element's (calc) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-content-box-003-3.1" class="primary">
<td><strong>
<a href="box-sizing-content-box-003.xht">box-sizing-content-box-003</a></strong></td>
<td></td>
<td></td>
<td>Box Sizing - Content-Box with min/max width/height
<ul class="assert">
<li>box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-padding-box-001-3.1" class="primary">
<td><strong>
<a href="box-sizing-padding-box-001.xht">box-sizing-padding-box-001</a></strong></td>
<td></td>
<td></td>
<td>Box Sizing - Padding-Box with specified width/height
<ul class="assert">
<li>box-sizing: padding-box should make the element's (percentage) width be the distance from the left padding edge to the right padding edge.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-padding-box-002-3.1" class="primary">
<td><strong>
<a href="box-sizing-padding-box-002.xht">box-sizing-padding-box-002</a></strong></td>
<td></td>
<td></td>
<td>Box Sizing - Padding-Box with specified width/height
<ul class="assert">
<li>box-sizing: padding-box should make the element's (percentage) width be the distance from the left padding edge to the right padding edge and the height be the distance from the top padding edge to the bottom padding edge.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-padding-box-003-3.1" class="primary">
<td><strong>
<a href="box-sizing-padding-box-003.xht">box-sizing-padding-box-003</a></strong></td>
<td></td>
<td></td>
<td>Box Sizing - Padding-Box with min/max width/height
<ul class="assert">
<li>box-sizing: padding-box should make the element's (calc) width be the distance from the left padding edge to the right padding edge and the height be the distance from the top padding edge to the bottom padding edge.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-replaced-001-3.1" class="primary image">
<td><strong>
<a href="box-sizing-replaced-001.xht">box-sizing-replaced-001</a></strong></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing
<ul class="assert">
<li>All images should be sized at 75px x 75px, with 5px of padding around each.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-replaced-002-3.1" class="primary image">
<td><strong>
<a href="box-sizing-replaced-002.xht">box-sizing-replaced-002</a></strong></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing
<ul class="assert">
<li>All images should be sized at 75px x 75px, with 5px of padding and 5px of blue border around each.</li>
</ul>
</td>
</tr>
<tr id="box-sizing-replaced-003-3.1" class="primary image">
<td><strong>
<a href="box-sizing-replaced-003.xht">box-sizing-replaced-003</a></strong></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing
<ul class="assert">
<li>All images should be sized at 75px x 75px.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.1.#box-sizing-example">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#issue-9bd5c115">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#propdef-box-sizing">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,183 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Outline properties - CSS Basic User Interface Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Basic User Interface Module Level 3 CR Test Suite</h1>
<h2>Outline properties (9 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a>
<a href="http://www.w3.org/TR/css3-ui/#outline-props">4 Outline properties</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="http://www.w3.org/TR/css3-ui/#outline">4.1 outline property</a></th></tr>
<!-- 2 tests -->
<tr id="outline-001-4.1" class="primary">
<td><strong>
<a href="outline-001.xht">outline-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>outline - create outline likes border property
<ul class="assert">
<li>Test checks that the outline property creates outlines around visual objects and makes them stand out</li>
</ul>
</td>
</tr>
<tr id="outline-002-4.1" class="primary">
<td><strong>
<a href="outline-002.xht">outline-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>outline - inherit (basic)
<ul class="assert">
<li>Test checks that the outline property inherits the parent's value when outline set inherit</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.1.#propdef-outline">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="http://www.w3.org/TR/css3-ui/#outline-width">4.2 outline-width property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#propdef-outline-width">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.3">+</a>
<a href="http://www.w3.org/TR/css3-ui/#outline-style">4.3 outline-style property</a></th></tr>
<!-- 4 tests -->
<tr id="outline-style-001-4.3" class="primary">
<td><strong>
<a href="outline-style-001.xht">outline-style-001</a></strong></td>
<td><a href="reference/outline-style-001-ref.xht">=</a> </td>
<td></td>
<td>outline-style - dotted (basic)
<ul class="assert">
<li>Test checks that the outline style is dotted when outline-style set dotted</li>
</ul>
</td>
</tr>
<tr id="outline-style-002-4.3" class="primary">
<td><strong>
<a href="outline-style-002.xht">outline-style-002</a></strong></td>
<td><a href="reference/outline-style-002-ref.xht">=</a> </td>
<td></td>
<td>outline-style - inherit (basic)
<ul class="assert">
<li>Test checks that the sub element outline style is same as parent element outline style when outline-style set inherit</li>
</ul>
</td>
</tr>
<tr id="outline-style-003-4.3" class="primary">
<td><strong>
<a href="outline-style-003.xht">outline-style-003</a></strong></td>
<td><a href="reference/outline-style-003-ref.xht">=</a> </td>
<td></td>
<td>outline-style - dashed (basic)
<ul class="assert">
<li>Test checks that the outline style is dashed when outline-style set dashed</li>
</ul>
</td>
</tr>
<tr id="outline-style-004-4.3" class="primary">
<td><strong>
<a href="outline-style-004.xht">outline-style-004</a></strong></td>
<td><a href="reference/outline-style-004-ref.xht">=</a> </td>
<td></td>
<td>outline-style - double (basic)
<ul class="assert">
<li>Test checks that the outline style is two solid lines when outline-style set double</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.3.#propdef-outline-style">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
<a href="http://www.w3.org/TR/css3-ui/#outline-color">4.4 outline-color property</a></th></tr>
<!-- 1 tests -->
<tr id="outline-color-001-4.4" class="primary">
<td><strong>
<a href="outline-color-001.xht">outline-color-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>outline-color - inherit (basic)
<ul class="assert">
<li>Test checks that the color of sub element outline is same as the color of parent element outline when outline-color set inherit</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.4.#invert">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#propdef-outline-color">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.5">+</a>
<a href="http://www.w3.org/TR/css3-ui/#outline-offset">4.5 outline-offset property</a></th></tr>
<!-- 2 tests -->
<tr id="outline-offset-4.5" class="primary">
<td><strong>
<a href="outline-offset.xht">outline-offset</a></strong></td>
<td><a href="reference/outline-offset.xht">=</a> </td>
<td></td>
<td>ttwf-reftest-outline-offset-ref
</td>
</tr>
<tr id="outline-offset-001-4.5" class="primary">
<td><strong>
<a href="outline-offset-001.xht">outline-offset-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>outline-offset - length (basic)
<ul class="assert">
<li>Test checks that the outline-offset keeps spacing between outline and element content</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.5.#propdef-outline-offset">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,199 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resizing & Overflow - CSS Basic User Interface Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Basic User Interface Module Level 3 CR Test Suite</h1>
<h2>Resizing & Overflow (11 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5">+</a>
<a href="http://www.w3.org/TR/css3-ui/#resizing-and-overflow">5 Resizing & Overflow</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1">+</a>
<a href="http://www.w3.org/TR/css3-ui/#resize">5.1 resize property</a></th></tr>
<!-- 7 tests -->
<tr id="resize-001-5.1" class="primary interact">
<td><strong>
<a href="resize-001.xht">resize-001</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>resize - both - both width and height adjusted
<ul class="assert">
<li>Test checks that both width and height adjusted when resize set both.</li>
</ul>
</td>
</tr>
<tr id="resize-002-5.1" class="primary interact">
<td><strong>
<a href="resize-002.xht">resize-002</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>resize - horizontal - only the width can be adjusted
<ul class="assert">
<li>Test checks that only the width of element can be adjusted when resize set horizontal</li>
</ul>
</td>
</tr>
<tr id="resize-003-5.1" class="primary interact">
<td><strong>
<a href="resize-003.xht">resize-003</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>resize - inherit - the resize property inherits parent element
<ul class="assert">
<li>Test checks that the resize element inherits parent element</li>
</ul>
</td>
</tr>
<tr id="resize-004-5.1" class="primary interact">
<td><strong>
<a href="resize-004.xht">resize-004</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>resize initial value - none
<ul class="assert">
<li>Test checks that the resize property initial value is none</li>
</ul>
</td>
</tr>
<tr id="resize-005-5.1" class="primary interact">
<td><strong>
<a href="resize-005.xht">resize-005</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>resize - none - neither width nor height can be adjusted
<ul class="assert">
<li>Test checks that neither the width nor the height can be adjusted when resize set none</li>
</ul>
</td>
</tr>
<tr id="resize-006-5.1" class="primary interact">
<td><strong>
<a href="resize-006.xht">resize-006</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>resize - vertical - only the height can be adjusted
<ul class="assert">
<li>Test checks that only the height can be adjusted when resize set vertical</li>
</ul>
</td>
</tr>
<tr id="resize-007-5.1" class="primary interact">
<td><strong>
<a href="resize-007.xht">resize-007</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>resize - invalid without overflow property
<ul class="assert">
<li>Test checks that resize property is invalid without overflow property</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.#propdef-resize">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.2">+</a>
<a href="http://www.w3.org/TR/css3-ui/#text-overflow">5.2 Overflow Ellipsis: the text-overflow property</a></th></tr>
<!-- 4 tests -->
<tr id="text-overflow-001-5.2" class="primary">
<td><strong>
<a href="text-overflow-001.xht">text-overflow-001</a></strong></td>
<td><a href="reference/text-overflow-001-ref.xht">=</a> </td>
<td></td>
<td>text-overflow - clip - the text inline content overflows will be broken
<ul class="assert">
<li>Test checks that the inline content that overflows will be clipped. Characters may be only partially rendered when text-overflow set clip</li>
</ul>
</td>
</tr>
<tr id="text-overflow-002-5.2" class="primary">
<td><strong>
<a href="text-overflow-002.xht">text-overflow-002</a></strong></td>
<td><a href="reference/text-overflow-002-ref.xht">=</a> </td>
<td></td>
<td>text-overflow - ellipsis - the broken textual content instead of ellipsis
<ul class="assert">
<li>Test checks that an ellipsis (...) is shown instead of overflowing textual content</li>
</ul>
</td>
</tr>
<tr id="text-overflow-003-5.2" class="primary">
<td><strong>
<a href="text-overflow-003.xht">text-overflow-003</a></strong></td>
<td><a href="reference/text-overflow-001-ref.xht">=</a> </td>
<td></td>
<td>text-overflow - inherit - inherit clip value of parent's text-overflow property
<ul class="assert">
<li>Test checks that text-overflow inherits the parent' clip value when text-overflow set inherit</li>
</ul>
</td>
</tr>
<tr id="text-overflow-004-5.2" class="primary">
<td><strong>
<a href="text-overflow-004.xht">text-overflow-004</a></strong></td>
<td><a href="reference/text-overflow-002-ref.xht">=</a> </td>
<td></td>
<td>text-overflow - inherit - inherit ellipsis value of parent's text-overflow property
<ul class="assert">
<li>Test checks that text-overflow inherits the parent' ellipsis value when text-overflow set inherit</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.2.#awesome-table">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#clip">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ellipsing-details">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ellipsis">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ellipsis-interaction">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ellipsis-scrolling">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#propdef-text-overflow">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#text-overflow-examples">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Acknowledgments - CSS Basic User Interface Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Basic User Interface Module Level 3 CR Test Suite</h1>
<h2>Acknowledgments (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="sA">
<tr><th colspan="4" scope="rowgroup">
<a href="#sA">+</a>
<a href="http://www.w3.org/TR/css3-ui/#acknowledgments">A Acknowledgments</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Changes - CSS Basic User Interface Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Basic User Interface Module Level 3 CR Test Suite</h1>
<h2>Changes (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="sB">
<tr><th colspan="4" scope="rowgroup">
<a href="#sB">+</a>
<a href="http://www.w3.org/TR/css3-ui/#changes">B Changes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="sB.#changes-list">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Default style sheet additions for HTML - CSS Basic User Interface Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Basic User Interface Module Level 3 CR Test Suite</h1>
<h2>Default style sheet additions for HTML (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="sC">
<tr><th colspan="4" scope="rowgroup">
<a href="#sC">+</a>
<a href="http://www.w3.org/TR/css3-ui/#default-style-sheet">C Default style sheet additions for HTML</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Suite - CSS Basic User Interface Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Basic User Interface Module Level 3 CR Test Suite</h1>
<h2>Test Suite (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="sD">
<tr><th colspan="4" scope="rowgroup">
<a href="#sD">+</a>
<a href="http://www.w3.org/TR/css3-ui/#test-suite">D Test Suite</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that a PNG image supported as a custom cursor." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly-64.png) 41 32, help; width:128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,18 @@
<!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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that a PNG image supported as a custom cursor, loaded cross-domain with absolute url." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(http://www.w3.org/Style/Woolly/woolly-mc.png) 41 32, help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,18 @@
<!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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that an ICO image is supported as a custom cursor." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly-64.ico), help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that an ICO image, with its own hotspot, is supported as a custom cursor." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly-64.cur), help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,18 @@
<!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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<link href="http://www.w3.org/TR/css3-images/#default-object-size" rel="help" />
<meta content="interact image svg" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that an SVG image with no fixed size is supported as a custom cursor at the default object size for cursor images." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly.svg) 41 32, help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image svg" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that a fixed size SVG image is supported as a custom cursor." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly-64.svg) 41 32, help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,18 @@
<!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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image animated" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that an ANI image, with it's own hotspot, is supported as a custom cursor." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/BlueButterfly.ani), help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like an animated butterfly AND is not a butterfly when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<div class="test"> </div>
<p class="attribution">Cursor by Vlasta, used here under a CC-BY license.</p>
</body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image svg" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that a compressed, fixed size SVG image is supported as a custom cursor." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly-64.svgz) 41 32, help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,18 @@
<!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 Basic User Interface Test: Cursor property, url value fallback</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that non-existent images cause the fallback to be used." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/does-not-exist.png) 41 32, help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, a help cursor is displayed AND
there is no help cursor when outside.</p>
<p>If inside the rectangle the cursor does not change, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -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 Basic User Interface Test: Cursor property, url value, no fallback</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image invalid" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that a fallback cursor is required." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/fail.cur);
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the the colored rectangle, the
cursor does not change.</p>
<p>If inside the rectangle the cursor changes to the word "FAIL" on a red
background, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,18 @@
<!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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that a GIF image is supported as a custom cursor." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/basn0g08.gif), help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like gray stripes AND is not gray stripes when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,20 @@
<!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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that a GIF image with transparency is supported as a custom cursor." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/tp1n3p08.gif), help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like
a gray cube AND is not a gray cube when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<p>White haloing around the cursor is acceptable in this test.</p>
<div class="test"> </div>
</body></html>

View file

@ -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 Basic User Interface Test: Cursor property, url value</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that a JPEG/JFIF image is supported as a custom cursor." name="assert" />
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/rainbow.jpg), help;
width: 128px; height: 128px}
</style>
</head><body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like
a rainbow AND is not a rainbow when outside.</p>
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact image" name="flags" />
<meta charset="UTF-8" />
<meta content="Test checks that a monochrome (type 0) PNG image, 1 bit/pixel, is supported as a CSS custom cursor." name="assert" />
<style>
div.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn0g01.png), help; width: 128px; height: 64px}
div.test:before {content: url(support/PTS/basn0g01.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<div class="test"> </div>
</body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a black and white PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn0g02.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn0g02.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local monochrome (type 0) PNG image, 2 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a black and white PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn0g04.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn0g04.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local monochrome (type 0) PNG image, 4 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a black and white PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn0g08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn0g08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local monochrome (type 0) PNG image, 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a black and white PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn0g16.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn0g16.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local monochrome (type 0) PNG image, 16 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an RGB PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn2c08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn2c08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local RGB (type 2) PNG image, 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an RGB PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn2c16.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn2c16.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local RGB (type 2) PNG image, 16 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an indexed PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn3p01.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn3p01.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local indexed (type 3) PNG image, 1 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an indexed PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn3p02.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn3p02.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local indexed (type 3) PNG image, 2 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an indexed PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn3p04.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn3p04.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local indexed (type 3) PNG image, 4 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an indexed PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn3p08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn3p08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local indexed (type 3) PNG image, 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a greyscale with alpha PNG image cursor is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/basn4a08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn4a08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<!-- changed background colour so grey semitransparent image can be seen -->
<p class="test"> </p>
<p>Local greyscale with alpha (type 4) PNG image, 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a greyscale with alpha PNG image cursor is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/basn4a16.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn4a16.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<!-- changed background colour so grey semitransparent image can be seen -->
<p class="test"> </p>
<p>Local greyscale with alpha (type 4) PNG image, 16 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an RGB with alpha PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn6a08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn6a08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local RGB with alpha (type 6) PNG image, 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an RGB with alpha PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basn6a16.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basn6a16.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local RGB with alpha (type 6) PNG image, 16 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced black and white PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi0g01.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi0g01.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced monochrome (type 0) PNG image, 1 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced black and white PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi0g02.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi0g02.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced monochrome (type 0) PNG image, 2 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced black and white PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi0g04.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi0g04.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced monochrome (type 0) PNG image, 4 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced black and white PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi0g08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi0g08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced monochrome (type 0) PNG image, 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced black and white PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi0g16.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi0g16.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced monochrome (type 0) PNG image, 16 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced RGB PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi2c08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi2c08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced RGB (type 2) PNG image, 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced RGB PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi2c16.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi2c16.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced RGB (type 2) PNG image, 16 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced, indexed PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi3p01.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi3p01.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced, indexed (type 3) PNG image, 1 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced, indexed PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi3p02.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi3p02.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced, indexed (type 3) PNG image, 2 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced, indexed PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi3p04.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi3p04.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced, indexed (type 3) PNG image, 4 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced, indexed PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi3p08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi3p08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced, indexed (type 3) PNG image, 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced greyscale with alpha PNG image cursor is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/basi4a08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi4a08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<!-- changed background colour so grey semitransparent image can be seen -->
<p class="test"> </p>
<p>Local interlaced greyscale with alpha (type 4) PNG image, 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced greyscale with alpha PNG image cursor is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/basi4a16.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi4a16.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<!-- changed background colour so grey semitransparent image can be seen -->
<p class="test"> </p>
<p>Local interlaced greyscale with alpha (type 4) PNG image, 16 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced RGB with alpha PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi6a08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi6a08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced RGB with alpha (type 6) PNG image, 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an interlaced RGB with alpha PNG image cursor is supported." name="assert" />
<style>
.test{background: #AAA; border: 2px solid #555;
cursor:url(support/PTS/basi6a16.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/basi6a16.png)
</style>
</head><body>
<p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Local interlaced RGB with alpha (type 6) PNG image, 16 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a greyscale PNG image cursor with transparency is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/tbbn0g04.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/tbbn0g04.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Greyscale PNG image, with transparency (tRNS), 4 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a greyscale PNG image cursor with transparency is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/tbwn0g16.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/tbwn0g16.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>Greyscale PNG image, with transparency (tRNS), 16 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an RGB PNG image cursor with transparency is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/tbrn2c08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/tbrn2c08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>RGB PNG image, with transparency (tRNS), 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an RGB PNG image cursor with transparency is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/tbrn2c08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/tbrn2c08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>RGB PNG image, with transparency (tRNS), 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an RGB PNG image cursor with transparency is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/tbbn2c16.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/tbbn2c16.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>RGB PNG image, with transparency (tRNS), 16 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an indexed PNG image cursor with transparency is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/tbgn3p08.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/tbgn3p08.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>indexed PNG image, with transparency (tRNS), 8 bit/pixel.
</p></body></html>

View file

@ -0,0 +1,17 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that an indexed PNG image cursor with transparency is supported." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/tm3n3p02.png), help; width :128px; height: 64px}
.test:before {content: url(support/PTS/tm3n3p02.png)
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p>
<p class="test"> </p>
<p>indexed PNG image, with multiple levels of transparency (tRNS), 8 bit/pixel.
</p></body></html>

View file

@ -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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that gamma correction on PNG image cursor is correct." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/g04n0g16.png), help; width :128px; height: 224px; font-size: 32px; line-height:32px}
</style>
</head><body>
<p>The test passes if all the reference images look the same, AND when moved inside the peach rectangle, the cursor looks like the reference images (ignoring the small numeric values in each image).</p>
<p class="test">
<img src="PTS/g03n0g16.png" /><br />
<img src="PTS/g04n0g16.png" /><br />
<img src="PTS/g05n0g16.png" /><br />
<img src="PTS/g07n0g16.png" /><br />
<img src="PTS/g10n0g16.png" /><br />
<img src="PTS/g25n0g16.png" /><br /> </p>
<p>Greyscale PNG images with various gamma values, 16 bit/pixel. Pixel values adjusted so that, when gamma corrected, the images look the same.
</p></body></html>

View file

@ -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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that gamma correction on PNG image cursor is correct." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/g04n2c08.png), help; width :128px; height: 224px; font-size: 32px; line-height:32px}
</style>
</head><body>
<p>The test passes if all the reference images look the same, AND when moved inside the peach rectangle, the cursor looks like the reference images (ignoring the small numeric values in each image).</p>
<p class="test">
<img src="PTS/g03n2c08.png" /><br />
<img src="PTS/g04n2c08.png" /><br />
<img src="PTS/g05n2c08.png" /><br />
<img src="PTS/g07n2c08.png" /><br />
<img src="PTS/g10n2c08.png" /><br />
<img src="PTS/g25n2c08.png" /><br /> </p>
<p>RGB PNG images with various gamma values, 8 bit/pixel. Pixel values adjusted so that, when gamma corrected, the images look the same.
</p></body></html>

View file

@ -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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that gamma correction on PNG image cursor is correct." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/g04n3p04.png), help; width :128px; height: 224px; font-size: 32px; line-height:32px}
</style>
</head><body>
<p>The test passes if all the reference images look the same, AND when moved inside the peach rectangle, the cursor looks like the reference images (ignoring the small numeric values in each image).</p>
<p class="test">
<img src="PTS/g03n3p04.png" /><br />
<img src="PTS/g04n3p04.png" /><br />
<img src="PTS/g05n3p04.png" /><br />
<img src="PTS/g07n3p04.png" /><br />
<img src="PTS/g10n3p04.png" /><br />
<img src="PTS/g25n3p04.png" /><br /> </p>
<p>Indexed PNG images with various gamma values, 4 bit/pixel. Pixel values adjusted so that, when gamma corrected, the images look the same.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks invalid PNG image cursor skipped, fallback used." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/xs2n0g01.png), help; width :128px; height: 64px}
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, a help cursor is shown.</p>
<p class="test"> </p>
<p>Invalid PNG image, signature bytes incorrect. Help cursor fallback.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks invalid PNG image cursor skipped, fallback used." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/xhdn0g08.png), help; width :128px; height: 64px}
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, a help cursor is shown.</p>
<p class="test"> </p>
<p>Invalid PNG image, incorrect header checksum. Help cursor fallback.
</p></body></html>

View file

@ -0,0 +1,16 @@
<!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 Basic User Interface Test: Cursor property, PNG</title>
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley" />
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks invalid PNG image cursor skipped, fallback used." name="assert" />
<style>
.test{background: #ffe5b4; border: 2px solid #555;
cursor:url(support/PTS/xdtn0g01.png), help; width :128px; height: 64px}
</style>
</head><body>
<p>The test passes if, when moved inside the peach rectangle, a help cursor is shown.</p>
<p class="test"> </p>
<p>Invalid PNG image, missing IDAT chunk. Help cursor fallback.
</p></body></html>

View file

@ -0,0 +1,27 @@
<!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 Basic User Interface Test: Directional Focus Navigation - property inheritance</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that the 'nav-left' property value is not inherited." name="assert" />
<style>
#parent {
nav-left: #finish;
}
#intermediate {
nav-left: #end;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating left twice moves the focus to the "FINISH" link.</p>
<div id="parent"><a href="">ignore</a> <a href="" id="intermediate">ignore</a> <a href="">START</a> <a href="" id="finish">ignore</a></div>
<div><a href="">ignore</a> <a href="" id="end">FINISH</a></div>
</body></html>

View file

@ -0,0 +1,25 @@
<!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 Basic User Interface Test: Directional Focus Navigation - 'inherit' property value</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that the 'inherit' value is respected." name="assert" />
<style>
#parent {
nav-left: #finish;
}
#start {
nav-left: inherit;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating left once moves the focus to the "FINISH" link.</p>
<div id="parent"><a href="">ignore</a> <a href="" id="start">START</a> <a href="" id="finish">FINISH</a></div>
</body></html>

View file

@ -0,0 +1,26 @@
<!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 Basic User Interface Test: Directional Focus Navigation - input elements</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that directional focus navigation properties work on input elements." name="assert" />
<style>
#start {
nav-left: #finish;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the text input containing "START" below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating left once moves the focus to the "FINISH" input.</p>
<div><input value="ignore" /> <input id="start" value="START" /> <input value="ignore" /></div>
<div><input value="ignore" /> <input value="ignore" /> <input value="ignore" /></div>
<div><input value="ignore" /> <input id="finish" value="FINISH" /> <input value="ignore" /></div>
</body></html>

View file

@ -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 Basic User Interface Test: Directional Focus Navigation - floating elements</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that directional focus navigation properties work on floating elements." name="assert" />
<style>
#container &gt; div {
clear: left;
}
#container &gt; div &gt; a {
float: left;
margin-right: 1ex;
}
#start {
nav-left: #finish;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating left once moves the focus to the "FINISH" input.</p>
<div id="container">
<div><a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a></div>
<div><a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div>
<div><a href="">ignore</a> <a href="" id="finish">FINISH</a> <a href="">ignore</a></div>
</div>
</body></html>

View file

@ -0,0 +1,22 @@
<!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 Basic User Interface Test: Directional Focus Navigation - currently focused element</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that focus doesn't change when navigating to the currently focused element." name="assert" />
<style>
#start {
nav-left: #start;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if the "START" element remains focused when navigating left.</p>
<div><a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a></div>
</body></html>

View file

@ -0,0 +1,26 @@
<!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 Basic User Interface Test: Directional Focus Navigation - 'current' target frame</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that the 'current' frame value is respected." name="assert" />
<style>
#start {
nav-down: #finish current;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating down once moves the focus to the "FINISH" link.</p>
<p><a href="" id="finish">FINISH</a></p>
<p><a href="" id="start">START</a></p>
<iframe src="support/nav-dir-target-001-frame.html"></iframe>
</body></html>

View file

@ -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 Basic User Interface Test: Directional Focus Navigation - 'root' target frame</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that the 'root' frame value is respected." name="assert" />
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating down once moves the focus to the "FINISH" link.</p>
<p><a href="" id="finish">FINISH</a></p>
<iframe src="support/nav-dir-target-002-frame.html"></iframe>
<p><a href="">ignore</a></p>
</body></html>

View file

@ -0,0 +1,24 @@
<!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 Basic User Interface Test: Directional Focus Navigation - named target frame</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a named target frame value is respected." name="assert" />
<style>
#start {
nav-right: #finish "frame";
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating right once moves the focus to the "FINISH" link.</p>
<p><a href="" id="start">START</a> <a href="" id="finish">ignore</a></p>
<iframe src="support/nav-dir-target-003-frame.html" name="frame"></iframe>
</body></html>

View file

@ -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 Basic User Interface Test: Directional Focus Navigation - non-existing target frame</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a non-existing target frame value is treated as 'current'." name="assert" />
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating up once moves the focus to the "FINISH" link.</p>
<p><a href="" id="finish">ignore</a></p>
<iframe src="support/nav-dir-target-004-frame.html"></iframe>
</body></html>

View file

@ -0,0 +1,18 @@
<!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 Basic User Interface Test: Directional Focus Navigation - sibling target frame</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that a named frame value also works for sibling frames." name="assert" />
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating left once moves the focus to the "FINISH" link.</p>
<iframe src="support/nav-dir-target-005-frame.html"></iframe>
<iframe src="support/nav-dir-target-003-frame.html" name="sibling"></iframe>
</body></html>

View file

@ -0,0 +1,29 @@
<!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 Basic User Interface Test: Directional Focus Navigation - missing target element</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that focus does not change to a different frame if the identifier is missing from the target frame." name="assert" />
<style>
#start {
nav-left: #finish current;
}
#intermediate {
nav-left: #end;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating left twice moves the focus to the "FINISH" link.</p>
<p><a href="">ignore</a> <a href="" id="intermediate">ignore</a> <a href="" id="start">START</a></p>
<iframe src="support/nav-dir-target-001-frame.html"></iframe>
<p><a href="" id="end">FINISH</a></p>
</body></html>

View file

@ -0,0 +1,27 @@
<!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 Basic User Interface Test: Directional Focus Navigation - property inheritance for 'nav-down'</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:d.glazman@partner.samsung.com" rel="author" title="Daniel Glazman" />
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that the 'nav-down' property value is not inherited for 'nav-left'." name="assert" />
<style type="text/css">
#parent {
nav-down: #finish;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating down once moves the focus to the "FINISH" link.</p>
<div id="parent">
<p><a href="">ignore</a></p>
<p><a href="">START</a></p>
<p><a href="" id="end">FINISH</a></p>
<p><a href="" id="finish">ignore</a></p>
</div>
</body></html>

View file

@ -0,0 +1,26 @@
<!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 Basic User Interface Test: Directional Focus Navigation (nav-down) - &lt;id&gt;</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:lstorset@opera.com" rel="reviewer" title="Leif Arne Storset" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /><!-- 07-18-2013 -->
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that downward navigation input respects the 'nav-down' property." name="assert" />
<style>
#start {
nav-down: #finish;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating down once moves the focus to the "FINISH" link.</p>
<div><a href="" id="finish">FINISH</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div>
<div><a href="">ignore</a> <a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a> <a href="">ignore</a></div>
<div><a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div>
</body></html>

View file

@ -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 Basic User Interface Test: Directional Focus Navigation - 'auto' value for 'nav-down'</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:d.glazman@partner.samsung.com" rel="author" title="Daniel Glazman" />
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that the 'auto' value is implemented for 'nav-down'." name="assert" />
<style type="text/css">
#start {
nav-down: #finish;
nav-down: auto;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating down once moves the focus to the "FINISH" link.</p>
<div id="parent">
<p><a href="">ignore</a></p>
<p><a href="" id="start">START</a></p>
<p><a href="" id="end">FINISH</a></p>
<p><a href="" id="finish">ignore</a></p>
</div>
</body></html>

View file

@ -0,0 +1,38 @@
<!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 Basic User Interface Test: Directional Focus Navigation - ID value for 'nav-down'</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:d.glazman@partner.samsung.com" rel="author" title="Daniel Glazman" />
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that the ID value is implemented for 'nav-down'." name="assert" />
<style type="text/css">
#parent {
nav-down: #finish;
}
#intermediate {
nav-down: #end;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating down twice moves the focus to the "FINISH" link.</p>
<div id="parent">
<p><a href="">ignore</a></p>
<p><a href="">START</a></p>
<p><a href="" id="intermediate">ignore</a></p>
<p><a href="">ignore</a></p>
</div>
<div>
<p><a href="">ignore</a></p>
<p><a href="" id="end">FINISH</a></p>
<p><a href="">ignore</a></p>
<p><a href="">ignore</a></p>
</div>
</body></html>

View file

@ -0,0 +1,42 @@
<!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 Basic User Interface Test: Directional Focus Navigation - input elements for 'nav-down'</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:d.glazman@partner.samsung.com" rel="author" title="Daniel Glazman" />
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that 'nav-down' works for input elements." name="assert" />
<style type="text/css">
#parent {
nav-down: #finish;
}
#intermediate {
nav-down: #end;
}
input {
display: block;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" text field below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating down twice moves the focus to the "FINISH" text field.</p>
<div id="parent">
<input value="ignore" />
<input value="START" />
<input id="intermediate" value="ignore" />
<input value="ignore" />
</div>
<div>
<input value="ignore" />
<input id="end" value="FINISH" />
<input value="ignore" />
<input value="ignore" />
</div>
</body></html>

View file

@ -0,0 +1,49 @@
<!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 Basic User Interface Test: Directional Focus Navigation - elements floating in the writing direction for 'nav-down'</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:d.glazman@partner.samsung.com" rel="author" title="Daniel Glazman" />
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that 'nav-down' works for elements floating to the left." name="assert" />
<style type="text/css">
div &gt; a {
float: left;
margin-left: 1em;
margin-right: 1em;
}
div {
clear: left;
}
#parent {
nav-down: #finish;
}
#intermediate {
nav-down: #end;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating down twice moves the focus to the "FINISH" link.</p>
<div id="parent">
<a href="">ignore 1</a>
<a href="">START</a>
<a href="" id="end">FINISH</a>
<a href="">ignore 3</a>
</div>
<div>
<a href="">ignore 4</a>
<a href="" id="intermediate">ignore 2</a>
<a href="">ignore 5</a>
<a href="">ignore 6</a>
</div>
</body></html>

View file

@ -0,0 +1,48 @@
<!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 Basic User Interface Test: Directional Focus Navigation - elements floating in opposite to the writing direction for 'nav-down'</title>
<link href="mailto:jorritv@opera.com" rel="author" title="Jorrit Vermeiren" />
<link href="mailto:d.glazman@partner.samsung.com" rel="author" title="Daniel Glazman" />
<link href="http://www.w3.org/TR/css3-ui/#nav-dir" rel="help" />
<meta content="interact" name="flags" />
<meta content="Test checks that 'nav-down' works for elements floating to the right." name="assert" />
<style type="text/css">
div &gt; a {
float: right;
margin-left: 1em;
margin-right: 1em;
}
div {
clear: right;
}
#parent {
nav-down: #finish;
}
#intermediate {
nav-down: #end;
}
</style>
</head><body>
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
<!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>.
In the SmartTV emulator, use the keypad in the GUI. -->
<p>Test passes if navigating down twice moves the focus to the "FINISH" link.</p>
<div id="parent">
<a href="">ignore 1</a>
<a href="">ignore 2</a>
<a href="">START</a>
<a href="">ignore 3</a>
</div>
<div>
<a href="">ignore 4</a>
<a href="" id="end">FINISH</a>
<a href="" id="intermediate">ignore 5</a>
<a href="">ignore 6</a>
</div>
</body></html>

Some files were not shown because too many files have changed in this diff Show more