Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 14:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

Browse source
This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 • committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
Download patch file Download diff file Expand all files Collapse all files

6
tests/wpt/web-platform-tests/css/css-ui-3/OWNERS Normal file
View file

@ -0,0 +1,6 @@
@frivoal
@mrego
@web-flow
@plinss
@svgeesus
@tantek

44
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-001.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.3.3</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">
<meta name="flags" content="">
<link rel="match" href="reference/box-sizing-001-ref.html">
<meta name="assert" content="When box-sizing is border-box, the content width, rather than the computed value of the width property,
is considered when checking whether a block is larger than its containing block.">
<style>
#cb {
position: absolute;
width: 100px;
height: 100px;
}
#red {
position:absolute;
top: 25px;
right:5px;
width: 70px;
height: 70px;
background:red;
z-index: -1;
}
#test {
box-sizing: border-box;
margin-top: 25px;
margin-right: 5px;
margin-left: auto; /* should resolve to 25px, but would resolve to 0 if the wrong interpretation of width is used in CSS2.1 10.3.3 */
padding-left: 25px;
padding-right: 25px;
width: 70px;
height: 70px;
background:green;
}
</style>
<body>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
<div id="cb">
<div id="red"></div>
<div id="test"></div>
</div>
</body>

38
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-003.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.3.7</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">
<meta name="flags" content="">
<link rel="match" href="reference/box-sizing-001-ref.html">
<meta name="assert" content="When box-sizing is border-box, the content width, rather than the computed value of the width property,
should be used in the the constraint that determines the used values of sizing and positioning properties
of absolutely positioned elements.">
<style>
#cb {
position: absolute;
width: 100px;
height: 100px;
}
#test {
position:absolute;
box-sizing: border-box;
margin-right: 5px;
margin-left: auto; /* should resolve to 25px, but would resolve to -25px if the wrong interpretation of width is used in CSS2.1 10.3.7 */
top: 25px;
left:0;
right:0;
padding-left: 25px;
padding-right: 25px;
width: 70px;
height: 70px;
background:green;
}
</style>
<body>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
<div id="cb">
<div id="test"></div>
</div>
</body>

41
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-005.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.6.4</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">
<meta name="flags" content="">
<link rel="match" href="reference/box-sizing-001-ref.html">
<meta name="assert" content="When box-sizing is border-box, the content height, rather than the computed value of the height property,
should be used in the the constraint that determines the used values of sizing and positioning properties
of absolutely positioned elements.">
<style>
#cb {
position: absolute;
width: 100px;
height: 100px;
}
#test {
position:absolute;
box-sizing: border-box;
margin-right: 5px;
margin-left: 25px;
margin-bottom: 5px;
margin-top: auto; /* should resolve to 25px, but would resolve to -25px if the wrong interpretation of width is used in CSS2.1 10.6.4 */
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 25px;
padding-bottom: 25px;
width: 70px;
height: 70px;
background:green;
}
</style>
<body>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
<div id="cb">
<div id="test"></div>
</div>
</body>

75
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-007.html Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: box-sizing:border-box and auto sizing of intrinsicly sized replaced elements.</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-007-ref.html">
<meta name="assert" content="Exercises the sizing rules in CSS2.1 10.3.2 and 10.6.2 with box-sizing:border-box for replaced elements with either both intrisic dimentions or an intrinsic ratio, to check that they work correctly in terms of the content width height.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
margin: 10px;
}
#t01, #t11, #t21, #t31 {
padding-left: 20px;
margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
#t02, #t12, #t22, #t32 {
padding-bottom: 20px;
margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
#t03, #t13, #t23, #t33 {
width: 120px;
padding-left: 20px;
margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
#t04, #t14, #t24, #t34 {
height: 120px;
padding-bottom: 20px;
margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
#t30, #t32 {
width: 100px;
}
#t31 {
height: 100px;
}
body {
max-width: 700px;
}
</style>
<body>
<p>Test passes if there are 20 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<img id=t00 src="support/w100_h100.svg">
<img id=t01 src="support/w100_h100.svg">
<img id=t02 src="support/w100_h100.svg">
<img id=t03 src="support/w100_h100.svg">
<img id=t04 src="support/w100_h100.svg">
<img id=t10 src="support/w100_r1-1.svg">
<img id=t11 src="support/w100_r1-1.svg">
<img id=t12 src="support/w100_r1-1.svg">
<img id=t13 src="support/w100_r1-1.svg">
<img id=t14 src="support/w100_r1-1.svg">
<img id=t20 src="support/h100_r1-1.svg">
<img id=t21 src="support/h100_r1-1.svg">
<img id=t22 src="support/h100_r1-1.svg">
<img id=t23 src="support/h100_r1-1.svg">
<img id=t24 src="support/h100_r1-1.svg">
<img id=t30 src="support/r1-1.svg">
<img id=t31 src="support/r1-1.svg">
<img id=t32 src="support/r1-1.svg">
<img id=t33 src="support/r1-1.svg">
<img id=t34 src="support/r1-1.svg">
</body>

57
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-008.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: box-sizing:border-box and auto sizing of replaced elements with intrinisic width only.</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-008-ref.html">
<meta name="assert" content="Exercises the sizing rules in CSS2.1 10.3.2 and 10.6.2 with box-sizing:border-box for replaced elements with intrisic width and no intrinsic ratio, to check that they work correctly in terms of the content width height.">
<style>
#ref {
width: 100px;
height: 150px;
background: green;
margin: 10px;
display: inline-block;
}
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
margin: 10px;
}
#t01 {
padding-left: 20px;
margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
#t02 {
padding-bottom: 20px;
margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
#t03 {
width: 120px;
padding-left: 20px;
margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
#t04 {
height: 170px;
padding-bottom: 20px;
margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
body {
max-width: 400px;
}
</style>
<body>
<p>Test passes if there are 6 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
<div id="ref"></div>
<img id=t00 src="support/w100.svg">
<img id=t01 src="support/w100.svg">
<img id=t02 src="support/w100.svg">
<img id=t03 src="support/w100.svg">
<img id=t04 src="support/w100.svg">
</body>

57
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-009.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: box-sizing:border-box and auto sizing of replaced elements with intrinisic height only.</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-009-ref.html">
<meta name="assert" content="Exercises the sizing rules in CSS2.1 10.3.2 and 10.6.2 with box-sizing:border-box for replaced elements with intrisic height and no intrinsic ratio, to check that they work correctly in terms of the content width height.">
<style>
#ref {
width: 300px;
height: 100px;
background: green;
margin: 10px;
display: inline-block;
}
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
margin: 10px;
}
#t01 {
padding-left: 20px;
margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
#t02 {
padding-bottom: 20px;
margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
#t03 {
width: 320px;
padding-left: 20px;
margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
#t04 {
height: 120px;
padding-bottom: 20px;
margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */
}
body {
max-width: 700px;
}
</style>
<body>
<p>Test passes if there are 6 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
<div id="ref"></div>
<img id=t00 src="support/h100.svg">
<img id=t01 src="support/h100.svg">
<img id=t02 src="support/h100.svg">
<img id=t03 src="support/h100.svg">
<img id=t04 src="support/h100.svg">
</body>

38
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-010.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and height, h > max-height</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-010-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic width and height
with the h &gt; max-height constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-bottom: 30px;
max-height: 100px;
}
#ref {
display: inline-block;
margin-bottom: 30px; /*for alignement*/
width: 70px;
height: 70px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/w100_h100.svg">
</body>

37
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-011.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and height, w > max-width</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-010-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic width and height
with the w &gt; max-width constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-right: 30px;
max-width: 100px;
}
#ref {
display:inline-block;
height: 70px;
width: 70px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/w100_h100.svg">
</body>

37
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-012.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width, h > max-height</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-012-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic width
with the h &gt; max-height constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-bottom: 30px;
max-height: 100px;
}
#ref {
margin-bottom: 10px;
width: 100px;
height: 70px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/w100.svg">
</body>

37
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-013.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic height, w > max-width</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-013-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic height
with the w &gt; max-width constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-right: 30px;
max-width: 100px;
}
#ref {
display:inline-block;
height: 100px;
width: 70px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/h100.svg">
</body>

38
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-014.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and ratio, h > max-height</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-010-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic width and ratio
with the h &gt; max-height constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-bottom: 30px;
max-height: 100px;
}
#ref {
display: inline-block;
margin-bottom: 30px; /*for alignement*/
width: 70px;
height: 70px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/w100_r1-1.svg">
</body>

37
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-015.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic height and ratio, w > max-width</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-010-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic height and ratio
with the w &gt; max-width constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-right: 30px;
max-width: 100px;
}
#ref {
display:inline-block;
height: 70px;
width: 70px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/h100_r1-1.svg">
</body>

38
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-016.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic ratio, h > max-height</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-010-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic ratio
with the h &gt; max-height constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-bottom: 30px;
max-height: 100px;
}
#ref {
display: inline-block;
margin-bottom: 30px; /*for alignement*/
width: 70px;
height: 70px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/r1-1.svg">
</body>

37
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-017.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic ratio, w > max-width</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-010-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic ratio
with the w &gt; max-width constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-right: 30px;
max-width: 100px;
}
#ref {
display:inline-block;
height: 70px;
width: 70px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/r1-1.svg">
</body>

38
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-018.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic height and ratio, w > max-wdith and h > max-height and max-width/w ≤ max-height/h</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-010-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic height and ratio
with the w &gt; max-width and h &gt; max-height constraint violation
and max-width/w ≤ max-height/h
are properly interpreted when box-sizing is border-box.">
<style>
#ref {
display: inline-block;
width: 70px;
height: 70px;
background: green;
}
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
max-height: 100px;
max-width: 70px;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id="ref"></div>
<img src="support/h100_r1-1.svg">
</body>

38
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-019.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and ratio, w > max-wdith and h > max-height and max-width/w > max-height/h</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-010-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic width and ratio
with the w &gt; max-width and h &gt; max-height constraint violation
and max-width/w &gt; max-height/h
are properly interpreted when box-sizing is border-box.">
<style>
#ref {
display: inline-block;
width: 70px;
height: 70px;
background: green;
}
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
max-height: 70px;
max-width: 100px;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id="ref"></div>
<img src="support/w100_r1-1.svg">
</body>

38
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-020.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and height, h &lt; min-height</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-020-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic width and height
with the h < min-height constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-bottom: 30px;
min-height: 160px;
}
#ref {
display: inline-block;
margin-bottom: 30px; /*for alignement*/
width: 130px;
height: 130px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/w100_h100.svg">
</body>

37
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-021.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and height, w &lt; win-width</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-020-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic width and height
with the w < min-width constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-right: 30px;
min-width: 160px;
}
#ref {
display:inline-block;
height: 130px;
width: 130px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/w100_h100.svg">
</body>

37
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-022.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width, w &lt; min-width</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-022-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic width
with the w < min-width constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-right: 30px;
min-width: 160px;
}
#ref {
display: inline-block;
width: 130px;
height: 150px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/w100.svg">
</body>

37
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-023.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic height, h &lt; min-height</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-023-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic height
with the h < min-height constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-bottom: 30px;
min-height: 160px;
}
#ref {
height: 130px;
margin-bottom: 10px;
width: 300px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/h100.svg">
</body>

38
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-024.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and ratio, h &lt; mi:-height</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-020-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic width and ratio
with the h < min-height constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-bottom: 30px;
min-height: 160px;
}
#ref {
display: inline-block;
margin-bottom: 30px; /*for alignement*/
width: 130px;
height: 130px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/w100_r1-1.svg">
</body>

37
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-025.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic height and ratio, w &lt; min-width</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
<meta name="flags" content="svg">
<link rel="match" href="reference/box-sizing-020-ref.html">
<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height
on replaced elements with intrinsic height and ratio
with the w < min-width constraint violation
are properly interpreted when box-sizing is border-box.">
<style>
img {
box-sizing: border-box;
width: auto;
height: auto;
background: white;
padding-right: 30px;
min-width: 160px;
}
#ref {
display:inline-block;
height: 130px;
width: 130px;
background: green;
}
</style>
<body>
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
<div id=ref></div>
<img src="support/h100_r1-1.svg">
</body>

29
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-026.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: box-sizing:border-box floors to 0</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<meta name="flags" content="">
<link rel="match" href="reference/box-sizing-001-ref.html">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Floor width and height computation to 0 as they cannot be negative.">
<style>
#red {
position: absolute;
width: 100px;
height: 100px;
background:red;
z-index: -1;
}
#test {
box-sizing: border-box;
border: 50px green solid;
width: 10px;
height: 10px;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id=red></div>
<div id=test></div>
</body>

34
tests/wpt/web-platform-tests/css/css-ui-3/box-sizing-027.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: box-sizing:border-box resolved values</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#test {
box-sizing: border-box;
border: 10px solid blue;
padding: 10px;
width: 100px;
height: 100px;
}
</style>
<body>
<div id=test></div>
<div id=log></div>
<script>
test(
function(){
var test = document.getElementById("test");
assert_equals(window.getComputedStyle(test)["width"], "100px");
}, "Check the resolved value of 'width' when box-sizing is border-box.");
test(
function(){
var test = document.getElementById("test");
assert_equals(window.getComputedStyle(test)["height"], "100px");
}, "Check the resolved value of 'height' when box-sizing is border-box.");
</script>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-ui-3/canvas-cursor-001.html Normal file
View file

@ -0,0 +1,25 @@
<!doctype html>
<title>CSS UI Test: propagating the root cursor to the canvas</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#canvas_cursor">
<meta name="flags" content="interact image">
<meta name="assert" content="Test checks the cursor applied to the root element is propagated to the canvas.">
<style>
:root {
padding:0;
background:blue;
cursor: url(support/green.ico), pointer;
}
body {
margin:0;
}
p {
background: white;
cursor: default;
position:absolute;
/* the p is taken out of flow to make the html and body elements collapse to nothing,
leaving the whole background area empty of any element,
as that's what we want to hover over */ }
</style>
<body>
<p>Place the mouse cursor over the blue area. You should see a green square.

22
tests/wpt/web-platform-tests/css/css-ui-3/canvas-cursor-002.html Normal file
View file

@ -0,0 +1,22 @@
<!doctype html>
<title>CSS UI Test: not propagating the body cursor to the canvas</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#canvas_cursor">
<meta name="flags" content="interact image">
<meta name="assert" content="Test checks the cursor applied to the body element is not propagated to the canvas.">
<style>
:root { padding:0; background:blue;}
body {
margin:0;
cursor: url(support/red.ico), pointer;
}
p {
background: white;
cursor: default;
position:absolute;
/* the p is taken out of flow to make the html and body elements collapse to nothing,
leaving the whole background area empty of any element,
as that's what we want to hover over */ }
</style>
<body>
<p>Place the mouse cursor over the blue area. You should see no red.

29
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-001.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact">
<meta name="assert" content="Test checks that caret-color can be set on a textarea">
<style>
textarea {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */
caret-color: lime;
}
</style>
<body>
<p>Test passes if, when the text area below is focused for editing, the text insertion caret is green.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<textarea id="test"></textarea>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

32
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-002.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color is inherited</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact">
<meta name="assert" content="Test checks that caret-color value does inherit">
<style>
textarea {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */
}
div {
caret-color: lime;
}
</style>
<body>
<p>Test passes if, when the text area below is focused for editing, the text insertion caret is green.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<div>
<textarea id="test"></textarea>
</div>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

31
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-003.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color auto</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact should">
<meta name="assert" content="Test checks that caret-color: auto matches currentColor">
<style>
textarea {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; /* the color of a thin object like the caret is easier to see on a black background. */
color: lime;
caret-color: auto; /*initial value, but to be sure in case the UA stylesheet sets something else */
}
</style>
<body>
<p>Test passes if, when the text area below is focused for editing, the text insertion caret is green,
like the text in that textarea.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<textarea id="test">focus this</textarea>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

30
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-004.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color auto, black on white</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact">
<meta name="assert" content="Test checks that caret-color:auto provides good contrast in black on white">
<style>
textarea {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: white;
color: black;
caret-color: auto; /*initial value, but to be sure in case the UA stylesheet sets something else */
}
</style>
<body>
<p>Test passes if, when the text area below is focused for editing, the text insertion caret is either black
or some other color that contrasts well with the background.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<textarea id="test"></textarea>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

30
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-005.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color auto, white on black</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact">
<meta name="assert" content="Test checks that caret-color:auto provides good contrast in white on black">
<style>
textarea {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black;
color: white;
caret-color: auto; /*initial value, but to be sure in case the UA stylesheet sets something else */
}
</style>
<body>
<p>Test passes if, when the text area below is focused for editing, the text insertion caret is either white
or some other color that contrasts well with the background.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<textarea id="test"></textarea>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

30
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-006.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color auto, gray on gray</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact may">
<meta name="assert" content="Test checks that caret-color:auto provides good contrast in gray on gray">
<style>
textarea {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: gray;
color: gray;
caret-color: auto; /*initial value, but to be sure in case the UA stylesheet sets something else */
}
</style>
<body>
<p>Test passes if, when the text area below is focused for editing, the text insertion caret is
any color that contrasts well with the background.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<textarea id="test"></textarea>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

36
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-007.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color: currentColor</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color">
<meta name="flags" content="interact">
<meta name="assert" content="Test checks that caret-color:currentColor is inherited as currentColor and resolves to the value of the color property at used value time">
<style>
textarea {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; /* the color of a thin object like the caret is easier to see on a black background. */
color: lime;
}
div {
caret-color: currentcolor;
color: red;
}
</style>
<body>
<p>Test passes if, when the text area below is focused for editing, the text insertion caret is green</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<div>
<textarea id="test"></textarea>
</div>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

38
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-008.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color animation</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation">
<meta name="flags" content="interact animated">
<meta name="assert" content="Test checks that caret-color is animatable as a color">
<style>
textarea {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */
caret-color: red;
animation: caret-many-colors 5s linear alternate infinite;
}
@keyframes caret-many-colors {
0% { caret-color: lime; }
20% { caret-color: gray; }
40% { caret-color: cyan; }
60% { caret-color: pink; }
80% { caret-color: blue; }
100% { caret-color: brown; }
}
</style>
<body>
<p>Test passes if, when the text area below is focused for editing, the text insertion caret continuously changes colors.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<textarea id="test"></textarea>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

49
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-009.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color computed values</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color">
<meta name="flags" content="dom">
<meta name="assert" content="Test checks that the resolved value of auto, currentcolor and initial for caret-color property, is the used value.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#d1 {
color: lime;
caret-color: auto;
}
#d2 {
color: cyan;
caret-color: currentcolor;
}
#d3 {
color: magenta;
caret-color: initial;
}
</style>
<body>
<div id=d1></div>
<div id=d2></div>
<div id=d3></div>
<div id=log></div>
<script>
test(
function(){
var d1 = document.getElementById("d1");
assert_equals(window.getComputedStyle(d1)["caret-color"], "rgb(0, 255, 0)");
}, "Check the resolved value of 'auto'");
test(
function(){
var d2 = document.getElementById("d2");
assert_equals(window.getComputedStyle(d2)["caret-color"], "rgb(0, 255, 255)");
}, "Check the resolved value of 'currentcolor'");
test(
function(){
var d3 = document.getElementById("d3");
assert_equals(window.getComputedStyle(d3)["caret-color"], "rgb(255, 0, 255)");
}, "Check the resolved value of 'initial'");
</script>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-010.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color input</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact">
<meta name="assert" content="Test checks that caret-color can be set on an input">
<style>
input {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */
caret-color: lime;
}
</style>
<body>
<p>Test passes if, when the input field below is focused for editing, the text insertion caret is green.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<input id="test"></input>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

28
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-011.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color contenteditable</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact">
<meta name="assert" content="Test checks that caret-color can be set on a contenteditable element">
<style>
div {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */
caret-color: lime;
}
</style>
<body>
<p>Test passes if, when when the editable element below is focused is focused for editing, the text insertion caret is green.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<div id="test" contenteditable>Focus this editable element</div>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

34
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-012.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color: auto</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact should">
<meta name="assert" content="Test checks that caret-color:auto is inherited as auto and resolves to the value of the color property at used value time">
<style>
textarea {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; /* the color of a thin object like the caret is easier to see on a black background. */
color: lime;
}
div {
caret-color: auto;
color: red;
}
</style>
<body>
<p>Test passes if, when the text area below is focused for editing, the text insertion caret is green.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<div>
<textarea id="test"></textarea>
</div>
<script>
window.onload = function() {
document.getElementById("test").focus();
}
</script>
</body>

50
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-013.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color dynamic changes</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
<meta name="flags" content="dom">
<meta name="assert" content="Test checks checks that carret-color can be correctly changed using the style attribute, and that the computed value is done correctly.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="wrapper">
<textarea id="textarea"></textarea>
</div>
<script>
function testStyleCaretColor(element, value) {
assert_equals(element.style.caretColor, value, "The style attribute's caret-color should be '" + value + "'");
}
function testComputedStyleCaretColor(element, value) {
assert_equals(getComputedStyle(element).getPropertyValue("caret-color"), value, "caret-color computed style should be '" + value + "'");
}
function setAndCheckCaretColor(element, caretColor, styleValue, computedStyleValue, description) {
element.style.caretColor = caretColor;
test(function() {
testStyleCaretColor(element, styleValue);
testComputedStyleCaretColor(element, computedStyleValue);
}, description);
}
var textarea = document.getElementById("textarea");
setAndCheckCaretColor(textarea, "", "", "rgb(0, 0, 0)", "Test default caret-color");
setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial");
setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 0, 0)", "Test caret-color: inherit");
setAndCheckCaretColor(textarea, "auto", "auto", "rgb(0, 0, 0)", "Test caret-color: auto");
setAndCheckCaretColor(textarea, "currentcolor", "currentcolor", "rgb(0, 0, 0)", "Test caret-color: currentcolor");
setAndCheckCaretColor(textarea, "lime", "lime", "rgb(0, 255, 0)", "Test caret-color: lime");
setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Reset caret-color: initial");
setAndCheckCaretColor(textarea, "rgb(0, 100, 100)", "rgb(0, 100, 100)", "rgb(0, 100, 100)", "Test caret-color: rgb(0, 100, 100)");
var wrapper = document.getElementById("wrapper");
wrapper.style.caretColor = "green";
setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial (inherited)");
setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 128, 0)", "Test caret-color: inherit (inherited)");
setAndCheckCaretColor(textarea, "blue", "blue", "rgb(0, 0, 255)", "Test caret-color: blue (inherited)");
</script>

29
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-014.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color links</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact">
<meta name="assert" content="Test checks that caret-color can be set on a contenteditable link">
<style>
a {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; /* the color of a thin object like the caret is easier to see on a black background. */
color: white;
caret-color: lime;
}
</style>
<body>
<p>Test passes if, when the link is focused for editing, the text insertion caret is green.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<a id="link" contenteditable href="#">link</a>
<script>
window.onload = function() {
document.getElementById("link").focus();
}
</script>
</body>

44
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-015.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color visited links</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<meta name="flags" content="interact">
<meta name="assert" content="Test checks that caret-color can be set on a contenteditable visited link">
<style>
a {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; /* the color of a thin object like the caret is easier to see on a black background. */
color: white;
caret-color: red;
}
a:link {
color: yellow;
}
a:visited {
caret-color: lime;
}
</style>
<body>
<p>Before running this test, this <a href="./">link</a> must have been visited. It will have yellow text if this is not the case. If it its text is yellow, you need to navigate to this link first.
<p>Test passes if, when the link below is focused for editing, the text insertion caret is green.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<a id="link" contenteditable href="./">link</a>
<script>
window.onload = function() {
/* Convenience helper to get the link into the browsing history.
Using a relative path because some browsers only allow replaceState within the same domain. */
current_url = window.location.href;
history.replaceState({},"","./");
history.replaceState({},"",current_url);
document.getElementById("link").focus();
}
</script>
</body>

53
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-016.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color visited link computed value</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
<link rel="help" href="https://www.w3.org/TR/selectors4/#link">
<meta name="flags" content="may interact">
<meta name="assert" content="Test checks that computed style of caret-color on visited links doesn't leak privacy information.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
a {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; /* the color of a thin object like the caret is easier to see on a black background. */
color: white;
caret-color: lime;
}
a:link {
color: yellow;
}
a:visited {
caret-color: cyan;
}
</style>
<body>
<p>Before running this test, this <a href="./">link</a> must have been visited. It will have yellow text if this is not the case. If it its text is yellow, you need to navigate to this link first.
<p><a id="link" contenteditable href="./">link</a></p>
<div id=log></div>
<script>
setup(
function(){
/* Helper to get the link into the browsing history.
Using a relative path because some browsers only allow replaceState within the same domain. */
current_url = window.location.href;
history.replaceState({},"","./");
history.replaceState({},"",current_url);
});
test(
function(){
var link = document.getElementById("link");
assert_equals(window.getComputedStyle(link)["caret-color"], "rgb(0, 255, 0)");
}, "The computed value of a visited link should be the same than a non-visited link");
</script>
</body>

29
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-017.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color transition</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<link rel="help" href="https://www.w3.org/TR/css3-transitions/#transition">
<meta name="flags" content="interact">
<meta name="assert" content="Test checks that caret-color can be used in a transition">
<style>
textarea {
font-size: 3em;
font-weight: bold;
width: 10em;
padding: 10px;
background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */
caret-color: magenta;
transition: caret-color 5s;
}
textarea:focus {
caret-color: lime;
}
</style>
<body>
<p>Test passes if, when the text area below is focused for editing, the text insertion caret color gradually changes from magenta to green.</p>
<p>The shape of the caret, and whether it flashes, are not part of the test.</p>
<textarea></textarea>
</body>

45
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-018.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color test animation</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate">
<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
<meta name="assert" content="Test checks that caret-color is animatable as a color, and that the computed values during the animation are the expected ones.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
textarea {
caret-color: red;
}
</style>
<body>
<textarea id="textarea"></textarea>
<div id=log></div>
<script>
test(
function(){
var textarea = document.getElementById("textarea");
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)');
var keyframes = [
{ caretColor: 'magenta' },
{ caretColor: 'lime' }
];
var options = {
duration: 10,
fill: "forwards"
};
var player = textarea.animate(keyframes, options);
player.pause();
player.currentTime = 0;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)');
player.currentTime = 5;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(128, 128, 128)');
player.currentTime = 10;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
}, "The caret-color property is animatable");
</script>
</body>

39
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-019.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color auto test animation</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate">
<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
<meta name="assert" content="Test checks that 'auto' value for caret-color property is not interpolable.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
textarea {
color: magenta;
}
</style>
<body>
<textarea id="textarea"></textarea>
<div id=log></div>
<script>
test(
function(){
var textarea = document.getElementById("textarea");
var keyframes = [
{ caretColor: 'auto' },
{ caretColor: 'lime' }
];
var options = {
duration: 10,
fill: "forwards"
};
var player = textarea.animate(keyframes, options);
player.pause();
player.currentTime = 5;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
}, "caret-color: auto is not interpolable");
</script>
</body>

39
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-020.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color currentcolor test animation</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate">
<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
<meta name="assert" content="Test checks that 'currentcolor' value for caret-color property is interpolable.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
textarea {
color: magenta;
}
</style>
<body>
<textarea id="textarea"></textarea>
<div id=log></div>
<script>
test(
function(){
var textarea = document.getElementById("textarea");
var keyframes = [
{ caretColor: 'currentcolor' },
{ caretColor: 'lime' }
];
var options = {
duration: 10,
fill: "forwards"
};
var player = textarea.animate(keyframes, options);
player.pause();
player.currentTime = 5;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(128, 128, 128)');
}, "caret-color: currentcolor is interpolable");
</script>
</body>

33
tests/wpt/web-platform-tests/css/css-ui-3/caret-color-021.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: Default caret-color test animation</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
<link rel="help" href="https://www.w3.org/TR/css3-animations/#animation-shorthand-property">
<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
<meta name="assert" content="Test checks that the default value for caret-color property, which is 'auto', is not interpolable.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes caret-color-to-lime {
to { caret-color: lime; }
}
#textarea {
color: magenta;
animation: caret-color-to-lime 2s -1s paused;
}
</style>
<body>
<textarea id="textarea"></textarea>
<div id=log></div>
<script>
test(
function(){
var textarea = document.getElementById("textarea");
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
}, "Default caret-color is not interpolable");
</script>
</body>

20
tests/wpt/web-platform-tests/css/css-ui-3/cursor-001.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: none</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'none' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: none;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor disappears.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-002.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: context-menu</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'context-menu' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: context-menu;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates availability of a context menu.
Often rendered as an arrow with a small menu-like graphic next to it.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-003.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: cell</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'cell' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: cell;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that a cell or set of cells may be selected.
Often rendered as a thick plus-sign with a dot in the middle.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-004.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: vertical-text</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'vertical-text' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: vertical-text;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates vertical-text that may be selected.
Often rendered as a horizontal I-beam.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-005.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: alias</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'alias' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: alias;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates an alias of/shortcut to something is to be created.
Often rendered as an arrow with a small curved arrow next to it.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-006.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: copy</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'copy' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: copy;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates something is to be copied.
Often rendered as an arrow with a small plus sign next to it.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-007.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: no-drop</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'no-drop' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: no-drop;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that the dragged item cannot be dropped at the current cursor location.
Often rendered as a hand or pointer with a small circle with a line through it.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-008.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: not-allowed</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'not-allowed' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: not-allowed;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that the requested action will not be carried out.
Often rendered as a circle with a line through it.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-009.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: grab</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'grab' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: grab;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that something can be grabbed (dragged to be moved).
Often rendered as the backside of an open hand.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-010.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: grabbing</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'grabbing' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: grabbing;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that something is being grabbed (dragged to be moved).
Often rendered as the backside of a hand with fingers closed mostly out of view.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-011.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: ew-resize</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'ew-resize' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: ew-resize;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized horizontally, bidirectionally.
Often rendered as arrows pointing left and right.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-012.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: ns-resize</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'ns-resize' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: ns-resize;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized vertically, bidirectionally.
Often rendered as arrows pointing up and down.</p>
<div></div>
</body>

22
tests/wpt/web-platform-tests/css/css-ui-3/cursor-013.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: nesw-resize</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'nesw-resize' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: nesw-resize;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized diagonally
along a north-east to south-west axis, bidirectionally.
Often rendered as arrows pointing north-east and south-west.</p>
<div></div>
</body>

22
tests/wpt/web-platform-tests/css/css-ui-3/cursor-014.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: nwse-resize</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'nwse-resize' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: nwse-resize;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized diagonally
along a north-west to south-east axis, bidirectionally.
Often rendered as arrows pointing north-west and south-east.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-015.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: col-resize</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'col-resize' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: col-resize;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized horizontally, bidirectionally.
Often rendered as arrows pointing left and right with a vertical bar separating them.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-016.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: row-resize</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'row-resize' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: row-resize;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized vertically, bidirectionally.
Often rendered as arrows pointing up and down with a horizontal bar separating them.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-017.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: all-scroll</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'all-scroll' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: all-scroll;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that the something can be scrolled in any direction.
Often rendered as arrows pointing up, down, left, and right with a dot in the middle.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-018.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: zoom-in</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'zoom-in' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: zoom-in;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that something can be zoomed in.
Often rendered as a magnifying glass with a "+" in the center of the glass.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-019.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: zoom-out</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'zoom-out' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: zoom-out;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates that something can be zoomed out.
Often rendered as a magnifying glass with a "-" in the center of the glass.</p>
<div></div>
</body>

20
tests/wpt/web-platform-tests/css/css-ui-3/cursor-020.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor: pointer</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'pointer' cursor value is supported">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: pointer;
width: 100px;
height: 100px;
border: solid blue;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor indicates a link. Often rendered as the backside of a hand with the index finger poiting and the other fingers closed.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-auto-001.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor:auto on text</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'auto' cursor value does the same as 'text' over text.">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
cursor: auto;
color: blue;
}
p {
cursor: text;
}
</style>
<body>
<p>The test passes if, when moved over the blue text, the cursor indicates text that may be selected, like it does when placed over this sentence.</p>
<div>Lorem ipsum</div>
</body>

22
tests/wpt/web-platform-tests/css/css-ui-3/cursor-auto-002.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor:auto on links</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'auto' cursor value does the same as 'text' over text. Links are not special.">
<style>
a {
cursor: url("support/cursors/fail.png"), help; /* Override UA styles, regardless of specificity */
cursor: auto !important; /* Override UA styles, regardless of specificity */
color: blue;
text-decoration: none; /* Having the link not standout as being a link, to avoid distracting the tester */
}
p {
cursor: text;
}
</style>
<body>
<p>The test passes if, when moved over the blue text, the cursor indicates text that may be selected, like it does when placed over this sentence.</p>
<a href="#">Lorem ipsum</a>
</body>

29
tests/wpt/web-platform-tests/css/css-ui-3/cursor-auto-003.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor:auto on non-textual links</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'auto' cursor value does the same as 'default' over non textual content. Links are not special.">
<style>
a {
cursor: url("support/cursors/fail.png"), help; /* Override UA styles, regardless of specificity */
cursor: auto !important; /* Override UA styles, regardless of specificity */
}
#ref {
cursor: default;
width: 100px;
height: 100px;
border: solid orange;
}
:root {
cursor: help; /* give the root element a different cursor so that
it is easy to tell if something changes when hovering the target.*/
}
</style>
<body>
<p>The test passes if, when moved over the image below, the cursor is the platform-dependent default cursor.</p>
<p>Place the cursor into the orange box for a reference of what this should look like.</p>
<a href="#"><img src="support/cursors/woolly-64.png"></a>
<div id=ref></div>
</body>

32
tests/wpt/web-platform-tests/css/css-ui-3/cursor-auto-004.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor:auto on empty space</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The 'auto' cursor value does the same as 'text' over text.">
<style>
div {
width: 100px;
height: 100px;
}
#test {
cursor: url("support/cursors/fail.png"), help;
cursor: auto;
border: solid blue;
}
#ref {
cursor: default;
border: solid orange;
}
:root {
cursor: help; /* give the root element a different cursor so that
it is easy to tell if something changes when hovering the target.*/
}
</style>
<body>
<p>The test passes if, when inside the blue box, the cursor is the platform-dependent default cursor.</p>
<p>Place the cursor into the orange box for a reference of what this should look like.</p>
<div id=test></div>
<div id=ref></div>
</body>

42
tests/wpt/web-platform-tests/css/css-ui-3/cursor-auto-005.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor:auto on form elements</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact may">
<meta charset="UTF-8">
<meta name="assert" content="The 'auto' cursor value does the same as 'default' over everything other than text, such as form elements.">
<style>
#test {
border: solid blue;
width: 200px;
cursor: auto;
}
#test * {
cursor: url("support/cursors/fail.png"), help !important; /* Override UA styles, regardless of specificity */
cursor: auto !important; /* Override UA styles, regardless of specificity */
resize: none; /* The appearance of the cursor over UA provided resize controls is out of scope. */
overflow: hidden; /* The appearance of the cursor over UA provided scroll controls is out of scope */
}
#ref {
width: 100px;
height: 100px;
cursor: default;
border: solid orange;
}
:root {
cursor: help; /* give the root element a different cursor so that
it is easy to tell if something changes when hovering the target.*/
}
</style>
<body>
<p>The test passes if, when moved over every element inside the blue box, the cursor remains the platform-dependent default cursor.</p>
<p>Place the cursor into the orange box for a reference of what this should look like.</p>
<div id=test>
<button>button</button>
<textarea></textarea>
<input>
<input type=button value=input-button>
<select></select>
</div>
<div id=ref></div>
</body>

17
tests/wpt/web-platform-tests/css/css-ui-3/cursor-border-area.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor on the border area</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The cursor property is applied over the border area.">
<style>
div {
border: solid 50px blue;
cursor: crosshair;
}
</style>
<body>
<p>The test passes if, when moved inside the blue rectangle, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p>
<div></div>
</body>

22
tests/wpt/web-platform-tests/css/css-ui-3/cursor-box-004.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor on the margin-box</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The cursor property is not applied over the margin box.">
<style>
#container {
position: absolute;
background: blue;
cursor: crosshair;
}
#test {
margin: 100px 50px;
cursor: url("support/cursors/fail.png"), help;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p>
<div id=container><div id=test></div></div>
</body>

22
tests/wpt/web-platform-tests/css/css-ui-3/cursor-box-005.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor on transparent borders</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The cursor property is applied over the border box, even if the border is transparent.">
<style>
#container {
position: absolute;
background: blue;
cursor: url("support/cursors/fail.png"), help;
}
#test {
border: solid transparent 50px;
cursor: crosshair;
}
</style>
<body>
<p>The test passes if, when moved over the blue box, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p>
<div id=container><div id=test></div></div>
</body>

28
tests/wpt/web-platform-tests/css/css-ui-3/cursor-box-006.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor on border images extending out of the border-box</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The cursor property is not applied outside of the border box, even if border images do extend further out.">
<style>
#container {
position: absolute;
padding: 50px;
cursor: crosshair;
}
#test{
border-image: linear-gradient(blue, blue);
border-image-outset: 50px;
border-image-width: 50px;
border-style: solid;
border-width: 5px;
border-color: white;
cursor: url("support/cursors/fail.png"), help;
}
</style>
<body>
<p>The test passes if, when moved over the blue boxes, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).
The shape of the cursor when it is over white areas is not part of this test.</p>
<div id=container><div id=test></div></div>
</body>

23
tests/wpt/web-platform-tests/css/css-ui-3/cursor-box-007.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor on the margin-box</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The cursor property is only applied within the border-edge, which follows border-radius.">
<style>
#container {
position: absolute;
background: blue;
cursor: crosshair;
}
#test {
border: solid white 50px;
border-radius: 50%;
cursor: default;
}
</style>
<body>
<p>The test passes if, when moved over the blue areas, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p>
<div id=container><div id=test></div></div>
</body>

18
tests/wpt/web-platform-tests/css/css-ui-3/cursor-content-area.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor on the content area</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="The cursor property is applied over the content area, as it is strictly inside the border edge.">
<style>
div {
background: blue;
height: 100px;
cursor: crosshair;
}
</style>
<body>
<p>The test passes if, when moved inside the blue rectangle, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p>
<div></div>
</body>

22
tests/wpt/web-platform-tests/css/css-ui-3/cursor-hover-001.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor and :hover</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="Checks that the correct cursor is used when :hover appears at the rightmost part of the selector.">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
width: 100px;
height: 100px;
border: solid blue;
}
div:hover {
cursor: crosshair;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p>
<div></div>
</body>

22
tests/wpt/web-platform-tests/css/css-ui-3/cursor-hover-002.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor and :hover on ancestor</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="Checks that the correct cursor is used when :hover appears in the selector other than at the rightmost part.">
<style>
div {
cursor: url("support/cursors/fail.png"), help;
width: 100px;
height: 100px;
border: solid blue;
}
:hover div {
cursor: crosshair;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p>
<div></div>
</body>

29
tests/wpt/web-platform-tests/css/css-ui-3/cursor-hover-003.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: cursor, :hover and inheritance</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact">
<meta charset="UTF-8">
<meta name="assert" content="Checks that a cursor set on an ancestor with the :hover pseudo class is properly inherited to the hovered child.">
<style>
#d1 {
width: 0;
height: 0;
position: relative;
cursor: url("support/cursors/fail.png"), help;
}
#d2 {
position: absolute;
top: 0; left: 0;
width: 100px;
height: 100px;
border: solid blue;
}
#d1:hover {
cursor: crosshair;
}
</style>
<body>
<p>The test passes if, when moved inside the blue box, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p>
<div id=d1><div id=d2></div></div>
</body>

18
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-001.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 -->
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that a PNG image supported as a custom cursor.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly-64.png) 41 32, help;
width: 128px; height: 128px}
</style>
<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>

18
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-002.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 -->
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that a PNG image supported as a custom cursor, loaded cross-domain with absolute url.">
<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>
<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>

19
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-003.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 -->
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image may">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that an ICO image is supported as a custom cursor.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly-64.ico), help;
width: 128px; height: 128px}
</style>
<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>

18
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-004.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 -->
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image may">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that an ICO image, with its own hotspot, is supported as a custom cursor.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly-64.cur), help;
width: 128px; height: 128px}
</style>
<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>

19
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-005-nfs.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 -->
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<link rel="help" href="http://www.w3.org/TR/css3-images/#default-object-size">
<meta name="flags" content="interact svg">
<meta charset="UTF-8">
<meta name="assert" 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.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly.svg) 41 32, help;
width: 128px; height: 128px}
</style>
<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>

18
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-005.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 -->
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact svg">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that a fixed size SVG image is supported as a custom cursor.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly-64.svg) 41 32, help;
width: 128px; height: 128px}
</style>
<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>

18
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-006.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image animated">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that an ANI image, with it's own hotspot, is supported as a custom cursor.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/BlueButterfly.ani), help;
width: 128px; height: 128px}
</style>
<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>

17
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-007.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image svg">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that a compressed, fixed size SVG image is supported as a custom cursor.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/woolly-64.svgz) 41 32, help;
width: 128px; height: 128px}
</style>
<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>

18
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-008.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value fallback</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that non-existent images cause the fallback to be used.">
<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>
<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>

20
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-009.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value, no fallback</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 -->
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image invalid">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that a fallback cursor is required.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/fail.cur);
width: 128px; height: 128px}
</style>
<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>

18
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-010.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that a GIF image is supported as a custom cursor.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/basn0g08.gif), help;
width: 128px; height: 128px}
</style>
<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>

20
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-011.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that a GIF image with transparency is supported as a custom cursor.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/tp1n3p08.gif), help;
width: 128px; height: 128px}
</style>
<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>

20
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-012.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, url value</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 -->
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image">
<meta charset="UTF-8">
<meta name="assert" content="Test checks that a JPEG/JFIF image is supported as a custom cursor.">
<style>
div.test{background: #D2B48C; border: 2px solid #555;
cursor:url(support/cursors/rainbow.jpg), help;
width: 128px; height: 128px}
</style>
<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>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-013.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, gradient image value</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image may">
<meta charset="UTF-8">
<meta name="assert" content="For cursors, UAs may support gradients, which are part of <image> value type">
<style>
div.test{
background: #D2B48C; border: 2px solid #555;
cursor: linear-gradient(blue, green), help;
width: 128px; height: 128px;
}
</style>
<body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like
a blue to green gradient.</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>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-014.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, image() value</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image may">
<meta charset="UTF-8">
<meta name="assert" content="For cursors, UAs may support the image() function, which are part of <image> value type.">
<style>
div.test{
background: #D2B48C; border: 2px solid #555;
cursor: image(green), help;
width: 128px; height: 128px;
}
</style>
<body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like
a solid patch of green.</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>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-015.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, image-set() value</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image may">
<meta charset="UTF-8">
<meta name="assert" content="For cursors, UAs may support image-set(), which is part of <image> value type">
<style>
div.test{
background: #D2B48C; border: 2px solid #555;
cursor: image-set( "support/cursors/woolly-64.ico" 1x), image-set( "support/cursors/woolly-64.png" 1x), help;
width: 128px; height: 128px;
}
</style>
<body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like
a sheep.</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>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-016.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, cross-fade image value</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image may">
<meta charset="UTF-8">
<meta name="assert" content="For cursors, UAs may support cross-fade(), which is part of <image> value type">
<style>
div.test{
background: #D2B48C; border: 2px solid #555;
cursor: cross-fade( url("support/cursors/woolly-64.ico"), green), cross-fade( url("support/cursors/woolly-64.png"), green), help;
width: 128px; height: 128px;
}
</style>
<body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like
a green sheep.</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>

21
tests/wpt/web-platform-tests/css/css-ui-3/cursor-image-017.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: Cursor property, fallback images</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact image">
<meta charset="UTF-8">
<meta name="assert" content="If the user agent cannot handle the first cursor of a list of cursors, it must attempt to handle the second, etc.">
<style>
div.test{
background: #D2B48C; border: 2px solid #555;
cursor: url("support/cursors/not-an-image.foo"), url("support/cursors/woolly-64.png"), url("support/cursors/woolly-64.ico"), help;
width: 128px; height: 128px;
}
</style>
<body>
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like
a sheep.</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>

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