mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update CSS tests to revision d13905941293af83ea8c3c1750dba652e0423fb0
This commit is contained in:
Ms2ger
parent
b492a3e8b1
commit
5450053b02
842 changed files with 42936 additions and 27 deletions
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html><!-- Submitted from TestTWF Paris --><head>
|
||||
|
||||
<title>CSS Values and Units Test: elements should be the real world size given in mm, cm, inches...</title>
|
||||
<meta content="elements are not displayed with the real world size units they should be, when specified in millimeters, centimeters, inches, ..." name="assert">
|
||||
<link href="mailto:marc@bourlon.com" rel="author" title="Marc Bourlon">
|
||||
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
|
||||
|
||||
.s1mm { background: #F00; width: 1mm; height: 1mm; }
|
||||
.s10mm { background: #66F; width: 10mm; height: 10mm; }
|
||||
.s1cm { background: #E90; width: 1cm; height: 1cm; }
|
||||
.s254cm { background: #D0D; width: 2.54cm; height: 2.54cm; }
|
||||
.s1in { background: #00F; width: 1in; height: 1in; }
|
||||
|
||||
.inline { float: left; }
|
||||
|
||||
.newline { clear: left; }
|
||||
|
||||
p { clear: both; margin: 10px 0; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
This should be 1mm (width) by 1mm (height) size
|
||||
</p>
|
||||
|
||||
<div class="s1mm"></div>
|
||||
|
||||
<p>
|
||||
This is 10 1mm x 1mm divs, so it should be 10mm (width) by 1mm (height) size
|
||||
</p>
|
||||
|
||||
<div class="s1mm newline inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
|
||||
<p>
|
||||
This should be 10mm (width) by 10mm (height) size.
|
||||
</p>
|
||||
|
||||
<div class="s10mm newline "></div>
|
||||
|
||||
<p>
|
||||
This should be 1cm (width) by 1cm (height) size. So, same width as the line above.
|
||||
</p>
|
||||
|
||||
<div class="s1cm newline "></div>
|
||||
|
||||
<p>
|
||||
This should be 2.54cm (width) by 2.54cm (height) size.
|
||||
</p>
|
||||
|
||||
<div class="s254cm newline "></div>
|
||||
|
||||
<p>
|
||||
This should be 1in (width) by 1in (height) size. So, same size as above.
|
||||
</p>
|
||||
|
||||
<div class="s1in"></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for calc() on background-image gradients</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-background-image-gradient-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
height: 50px; width: 200px;
|
||||
border: thin solid;
|
||||
}
|
||||
|
||||
#one { background-image: radial-gradient(circle farthest-side at calc(50px + 50%) calc(100% - 30px), red, green); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="one"></p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Support calc() on gradient stop positions</title>
|
||||
<link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935" rel="author" title="Yu-Sian (Thomasy) Liu">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-background-linear-gradient-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background:red;
|
||||
margin:5px 0 0 5px;
|
||||
float:left;
|
||||
}
|
||||
div#one {
|
||||
background: linear-gradient(lime 0px, lime calc(100% - 10px), blue calc(100% - 10px), blue 100%);
|
||||
}
|
||||
div#two {
|
||||
background: linear-gradient(blue calc(100% - 100px) ,green calc(10% + 20px) ,red 40px ,white calc(100% - 40px) , lime 80px);
|
||||
}
|
||||
div#three {
|
||||
background: linear-gradient(blue calc(0px) ,purple calc(20%) ,red calc(10px + 10px + 20px) ,blue calc(30% + 30px) , lime calc(180% - 100px));
|
||||
}
|
||||
div#four {
|
||||
background: linear-gradient(blue calc(0% + 0px) ,green calc(10% + 20px) ,red 40px ,blue calc(200% / 2 - 40px) , yellow 80px);
|
||||
}
|
||||
div#five {
|
||||
background: linear-gradient(red calc(100% - 100px) ,green calc(10% + 20px));
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="one">1</div>
|
||||
<div id="two">2</div>
|
||||
<div id="three">3</div>
|
||||
<div id="four">4</div>
|
||||
<div id="five">5</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for calc() on background-position</title>
|
||||
<link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-background-position-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
height: 50px; width: 200px;
|
||||
border: thin solid;
|
||||
background-image: url(../backgrounds/blue-32x32.png);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#one { background-position: calc(50px + 50%) calc(100% - 30px) }
|
||||
#two { background-position: calc(-12.5% + 3px) calc(-10px - 50%) }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="one"></p>
|
||||
<p id="two"></p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for calc() on background-size</title>
|
||||
<link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-background-size-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
height: 50px; width: 200px;
|
||||
border: thin solid;
|
||||
background-image: url(../backgrounds/blue-32x32.png);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#one { background-size: calc(50px + 50%) calc(100% - 30px) }
|
||||
#two { background-size: calc(50px + 50%) calc(10px - 50%) }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="one"></p>
|
||||
<p id="two"></p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: test for border-radius: calc()</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-border-radius-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
/* We use powers of two here to avoid floating-point issues.
|
||||
See bug 590181. */
|
||||
|
||||
height: 256px;
|
||||
width: 512px;
|
||||
background: blue;
|
||||
border-radius: calc((1/32 * 100%) + 5px)
|
||||
calc((1/64 * 100%) - 2px)
|
||||
calc(10px + (1/256 * 100%))
|
||||
calc((1/16 * 100%) - 3px) /
|
||||
calc((1/32 * 100%) - (1px + (1/128 * 100%)))
|
||||
calc(1/16 * 100%)
|
||||
calc(10px)
|
||||
3px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p></p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for height:calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-height-block-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 1px; }
|
||||
body > div > div { background: blue }
|
||||
|
||||
/* for auto-height tests */
|
||||
body > div > div > div > div { height: 10px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div><div style="height: calc(50px)"></div></div>
|
||||
<div><div style="height: calc(50%)"></div></div>
|
||||
<div><div style="height: calc(25px + 50%)"></div></div>
|
||||
<div><div style="height: calc(150% / 2 - 30px)"></div></div>
|
||||
<div><div style="height: calc(40px + 10% - 20% / 2)"></div></div>
|
||||
<div><div style="height: calc(40px - 10%)"></div></div>
|
||||
|
||||
<!-- tests with an auto-height container -->
|
||||
<div><div><div style="height: calc(50px)"><div></div></div></div></div>
|
||||
<div><div><div style="height: calc(50%)"><div></div></div></div></div>
|
||||
<div><div><div style="height: calc(25px + 50%)"><div></div></div></div></div>
|
||||
<div><div><div style="height: calc(150% / 2 - 30px)"><div></div></div></div></div>
|
||||
<div><div><div style="height: calc(40px + 10% - 20% / 2)"><div></div></div></div></div>
|
||||
<div><div><div style="height: calc(40px - 10%)"><div></div></div></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test that height:calc() with no percentages has an effect on inner table elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-height-table-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
tbody, tr, td {
|
||||
height: calc(500px);
|
||||
min-height: calc(700px);
|
||||
max-height: calc(2px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table border="">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>cell</td>
|
||||
<td>cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cell</td>
|
||||
<td>cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test of margin-*: calc()</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-margin-block-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
div { border: medium solid green; width: 500px }
|
||||
p { background: yellow }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><p style="margin: calc(10px + 1%) 0 0 0">paragraph with margin</p></div>
|
||||
<div><p style="margin: 0 calc(10px + 1%) 0 0">paragraph with margin</p></div>
|
||||
<div><p style="margin: 0 0 calc(10px + 1%) 0">paragraph with margin</p></div>
|
||||
<div><p style="margin: 0 0 0 calc(10px + 1%)">paragraph with margin</p></div>
|
||||
<div><p style="margin: calc(30px - 1%)">paragraph with margin</p></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for max-height:calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-max-height-block-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 1px; }
|
||||
body > div > div { background: blue }
|
||||
|
||||
/* to give the max-height something to restrict */
|
||||
span { display: block; height: 300px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div><div style="max-height: calc(50px)"><span></span></div></div>
|
||||
<div><div style="max-height: calc(50%)"><span></span></div></div>
|
||||
<div><div style="max-height: calc(25px + 50%)"><span></span></div></div>
|
||||
<div><div style="max-height: calc(150% / 2 - 30px)"><span></span></div></div>
|
||||
<div><div style="max-height: calc(40px + 10% - 20% / 2)"><span></span></div></div>
|
||||
<div><div style="max-height: calc(40px - 10%)"><span></span></div></div>
|
||||
|
||||
<!-- tests with an auto-height container -->
|
||||
<div><div><div style="max-height: calc(50px)"><span></span></div></div></div>
|
||||
<div><div><div style="max-height: calc(50%)"><span></span></div></div></div>
|
||||
<div><div><div style="max-height: calc(25px + 50%)"><span></span></div></div></div>
|
||||
<div><div><div style="max-height: calc(150% / 2 - 30px)"><span></span></div></div></div>
|
||||
<div><div><div style="max-height: calc(40px + 10% - 20% / 2)"><span></span></div></div></div>
|
||||
<div><div><div style="max-height: calc(40px - 10%)"><span></span></div></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: max-width: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-width-block-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
p { background: green; color: white; margin: 1px 0; font-size: 10px; width: 1000px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p style="max-width: calc(50% - 3px)">50% - 3px</p>
|
||||
<p style="max-width: calc(25% - 3px + 25%)">25% - 3px + 25%</p>
|
||||
<p style="max-width: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p>
|
||||
<p style="max-width: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p>
|
||||
<p style="max-width: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p>
|
||||
<p style="max-width: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p>
|
||||
<p style="max-width: calc(30% + 20%)">30% + 20%</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: intrinsic width of max-width: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-max-width-block-intrinsic-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 10px }
|
||||
body > div { float: left; clear: left;
|
||||
margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
body > div > div { width: 400px }
|
||||
body > div > div > div { width: 200px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><div style="max-width: calc(50% - 3px)"><div></div></div></div>
|
||||
<div><div style="max-width: calc(5em - 3px)"><div></div></div></div>
|
||||
<div><div style="max-width: calc(5em - 0%)"><div></div></div></div>
|
||||
<div><div style="max-width: calc(50%)"><div></div></div></div>
|
||||
<div><div style="max-width: calc(50px)"><div></div></div></div>
|
||||
<div><div style="max-width: calc(25% + 25%)"><div></div></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for min-height:calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-height-block-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 1px; }
|
||||
body > div > div { background: blue }
|
||||
|
||||
/* for auto-height tests */
|
||||
body > div > div > div > div { height: 10px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div><div style="min-height: calc(50px)"></div></div>
|
||||
<div><div style="min-height: calc(50%)"></div></div>
|
||||
<div><div style="min-height: calc(25px + 50%)"></div></div>
|
||||
<div><div style="min-height: calc(150% / 2 - 30px)"></div></div>
|
||||
<div><div style="min-height: calc(40px + 10% - 20% / 2)"></div></div>
|
||||
<div><div style="min-height: calc(40px - 10%)"></div></div>
|
||||
|
||||
<!-- tests with an auto-height container -->
|
||||
<div><div><div style="min-height: calc(50px)"><div></div></div></div></div>
|
||||
<div><div><div style="min-height: calc(50%)"><div></div></div></div></div>
|
||||
<div><div><div style="min-height: calc(25px + 50%)"><div></div></div></div></div>
|
||||
<div><div><div style="min-height: calc(150% / 2 - 30px)"><div></div></div></div></div>
|
||||
<div><div><div style="min-height: calc(40px + 10% - 20% / 2)"><div></div></div></div></div>
|
||||
<div><div><div style="min-height: calc(40px - 10%)"><div></div></div></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: min-width: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-width-block-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
p { background: green; color: white; margin: 1px 0; font-size: 10px; width: 0 }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p style="min-width: calc(50% - 3px)">50% - 3px</p>
|
||||
<p style="min-width: calc(25% - 3px + 25%)">25% - 3px + 25%</p>
|
||||
<p style="min-width: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p>
|
||||
<p style="min-width: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p>
|
||||
<p style="min-width: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p>
|
||||
<p style="min-width: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p>
|
||||
<p style="min-width: calc(30% + 20%)">30% + 20%</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: intrinsic width of min-width: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-min-width-block-intrinsic-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 10px }
|
||||
body > div { float: left; clear: left;
|
||||
margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
body > div > div { width: 1px }
|
||||
body > div > div > div { width: 200px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><div style="min-width: calc(50% - 3px)"><div></div></div></div>
|
||||
<div><div style="min-width: calc(5em - 3px)"><div></div></div></div>
|
||||
<div><div style="min-width: calc(5em - 0%)"><div></div></div></div>
|
||||
<div><div style="min-width: calc(50%)"><div></div></div></div>
|
||||
<div><div style="min-width: calc(50px)"><div></div></div></div>
|
||||
<div><div style="min-width: calc(25% + 25%)"><div></div></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for bottom:calc() on absolutely positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-offsets-absolute-top-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; margin-top: -90px; height: 100px; margin-bottom: 90px; width: 3px; position: relative }
|
||||
div[style] { background: blue; position: absolute; height: 10px; width: 3px }
|
||||
div.space { height: 100px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div><div style="bottom: calc(-50px)"></div></div>
|
||||
<div><div style="bottom: calc(-50%)"></div></div>
|
||||
<div><div style="bottom: calc(-25px - 50%)"></div></div>
|
||||
<div><div style="bottom: calc(-150% / 2 + 30px)"></div></div>
|
||||
<div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div></div>
|
||||
<div><div style="bottom: calc(-40px + 10%)"></div></div>
|
||||
|
||||
<!-- tests with an auto-bottom container -->
|
||||
<div><div><div style="bottom: calc(-50px)"></div><div class="space"></div></div></div>
|
||||
<div><div><div style="bottom: calc(-50%)"></div><div class="space"></div></div></div>
|
||||
<div><div><div style="bottom: calc(-25px - 50%)"></div><div class="space"></div></div></div>
|
||||
<div><div><div style="bottom: calc(-150% / 2 + 30px)"></div><div class="space"></div></div></div>
|
||||
<div><div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div><div class="space"></div></div></div>
|
||||
<div><div><div style="bottom: calc(-40px + 10%)"></div><div class="space"></div></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for left:calc() on absolutely positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-offsets-relative-left-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 100px; width: 200px }
|
||||
body > div { height: 3px; position: relative }
|
||||
div[style] { background: blue; position: absolute; height: 3px; width: 100px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><div style="left: calc(50px)"></div></div>
|
||||
<div><div style="left: calc(-25%)"></div></div>
|
||||
<div><div style="left: calc(25px + 25%)"></div></div>
|
||||
<div><div style="left: calc(-75% / 2 + 30px)"></div></div>
|
||||
<div><div style="left: calc(40px + 5% - 10% / 2)"></div></div>
|
||||
<div><div style="left: calc(5% - 40px)"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for right:calc() on absolutely positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-offsets-relative-left-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0; width: 200px }
|
||||
body > div { height: 3px; position: relative }
|
||||
div[style] { background: blue; position: absolute; height: 3px; width: 100px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><div style="right: calc(-50px)"></div></div>
|
||||
<div><div style="right: calc(25%)"></div></div>
|
||||
<div><div style="right: calc(-25px - 25%)"></div></div>
|
||||
<div><div style="right: calc(75% / 2 - 30px)"></div></div>
|
||||
<div><div style="right: calc(-40px - 5% + 10% / 2)"></div></div>
|
||||
<div><div style="right: calc(-5% + 40px)"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for top:calc() on absolutely positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-offsets-absolute-top-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 3px; position: relative }
|
||||
div[style] { background: blue; position: absolute; height: 10px; width: 3px }
|
||||
div.space { height: 100px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div><div style="top: calc(50px)"></div></div>
|
||||
<div><div style="top: calc(50%)"></div></div>
|
||||
<div><div style="top: calc(25px + 50%)"></div></div>
|
||||
<div><div style="top: calc(150% / 2 - 30px)"></div></div>
|
||||
<div><div style="top: calc(40px + 10% - 20% / 2)"></div></div>
|
||||
<div><div style="top: calc(40px - 10%)"></div></div>
|
||||
|
||||
<!-- tests with an auto-top container -->
|
||||
<div><div><div style="top: calc(50px)"></div><div class="space"></div></div></div>
|
||||
<div><div><div style="top: calc(50%)"></div><div class="space"></div></div></div>
|
||||
<div><div><div style="top: calc(25px + 50%)"></div><div class="space"></div></div></div>
|
||||
<div><div><div style="top: calc(150% / 2 - 30px)"></div><div class="space"></div></div></div>
|
||||
<div><div><div style="top: calc(40px + 10% - 20% / 2)"></div><div class="space"></div></div></div>
|
||||
<div><div><div style="top: calc(40px - 10%)"></div><div class="space"></div></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for bottom:calc() on relatively positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-offsets-relative-top-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 3px; }
|
||||
div[style] { background: blue; position: relative; height: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div><div style="bottom: calc(-50px)"></div></div>
|
||||
<div><div style="bottom: calc(-50%)"></div></div>
|
||||
<div><div style="bottom: calc(-25px - 50%)"></div></div>
|
||||
<div><div style="bottom: calc(-150% / 2 + 30px)"></div></div>
|
||||
<div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div></div>
|
||||
<div><div style="bottom: calc(-40px + 10%)"></div></div>
|
||||
|
||||
<!-- tests with an auto-top container -->
|
||||
<div><div><div style="bottom: calc(-50px)"></div></div></div>
|
||||
<div><div><div style="bottom: calc(-50%)"></div></div></div>
|
||||
<div><div><div style="bottom: calc(-25px - 50%)"></div></div></div>
|
||||
<div><div><div style="bottom: calc(-150% / 2 + 30px)"></div></div></div>
|
||||
<div><div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div></div></div>
|
||||
<div><div><div style="bottom: calc(-40px + 10%)"></div></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for left:calc() on relatively positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-offsets-relative-left-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 100px; width: 100px }
|
||||
div[style] { background: blue; position: relative; height: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="left: calc(50px)"></div>
|
||||
<div style="left: calc(-50%)"></div>
|
||||
<div style="left: calc(25px + 50%)"></div>
|
||||
<div style="left: calc(-150% / 2 + 30px)"></div>
|
||||
<div style="left: calc(40px + 10% - 20% / 2)"></div>
|
||||
<div style="left: calc(10% - 40px)"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for right:calc() on relatively positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-offsets-relative-left-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 100px; width: 100px }
|
||||
div[style] { background: blue; position: relative; height: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="right: calc(-50px)"></div>
|
||||
<div style="right: calc(50%)"></div>
|
||||
<div style="right: calc(-25px - 50%)"></div>
|
||||
<div style="right: calc(150% / 2 - 30px)"></div>
|
||||
<div style="right: calc(-40px - 10% + 20% / 2)"></div>
|
||||
<div style="right: calc(-10% + 40px)"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for top:calc() on relatively positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-offsets-relative-top-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 3px; }
|
||||
div[style] { background: blue; position: relative; height: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div><div style="top: calc(50px)"></div></div>
|
||||
<div><div style="top: calc(50%)"></div></div>
|
||||
<div><div style="top: calc(25px + 50%)"></div></div>
|
||||
<div><div style="top: calc(150% / 2 - 30px)"></div></div>
|
||||
<div><div style="top: calc(40px + 10% - 20% / 2)"></div></div>
|
||||
<div><div style="top: calc(40px - 10%)"></div></div>
|
||||
|
||||
<!-- tests with an auto-top container -->
|
||||
<div><div><div style="top: calc(50px)"></div></div></div>
|
||||
<div><div><div style="top: calc(50%)"></div></div></div>
|
||||
<div><div><div style="top: calc(25px + 50%)"></div></div></div>
|
||||
<div><div><div style="top: calc(150% / 2 - 30px)"></div></div></div>
|
||||
<div><div><div style="top: calc(40px + 10% - 20% / 2)"></div></div></div>
|
||||
<div><div><div style="top: calc(40px - 10%)"></div></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test of padding-*: calc()</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-padding-block-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
div { border: medium solid green }
|
||||
p { background: yellow; margin: 0 }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="padding: calc(10px + 1%) 0 0 0"><p>paragraph with padding</p></div>
|
||||
<div style="padding: 0 calc(10px + 1%) 0 0"><p>paragraph with padding</p></div>
|
||||
<div style="padding: 0 0 calc(10px + 1%) 0"><p>paragraph with padding</p></div>
|
||||
<div style="padding: 0 0 0 calc(10px + 1%)"><p>paragraph with padding</p></div>
|
||||
<div style="padding: calc(30px - 1%)"><p>paragraph with padding</p></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: text-indent: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-text-indent-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
p { font-size: 10px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p style="text-indent: calc(50% - 3px)">50% - 3px</p>
|
||||
<p style="text-indent: calc(25% - 3px + 25%)">25% - 3px + 25%</p>
|
||||
<p style="text-indent: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p>
|
||||
<p style="text-indent: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p>
|
||||
<p style="text-indent: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p>
|
||||
<p style="text-indent: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p>
|
||||
<p style="text-indent: calc(30% + 20%)">30% + 20%</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: intrinsic width of text-indent: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-text-indent-intrinsic-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 10px }
|
||||
div { float: left; clear: left;
|
||||
margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
span { display: inline-block; width: 10px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="text-indent: calc(50% - 3px)"><span></span></div>
|
||||
<div style="text-indent: calc(5em - 3px)"><span></span></div>
|
||||
<div style="text-indent: calc(5em - 0%)"><span></span></div>
|
||||
<div style="text-indent: calc(50%)"><span></span></div>
|
||||
<div style="text-indent: calc(50px)"><span></span></div>
|
||||
<div style="text-indent: calc(25% + 25%)"><span></span></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for calc() on transform-origin</title>
|
||||
<link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-transform-origin-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { margin: 100px }
|
||||
|
||||
p {
|
||||
height: 50px; width: 200px;
|
||||
background: yellow;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
#one { transform-origin: calc(50px + 50%) calc(100% - 30px); }
|
||||
#two { transform-origin: calc(-12.5% + 3px) calc(-10px - 50%); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="one">hello</p>
|
||||
<p id="two">hello</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Variables Allowed Syntax</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://mozilla.com/" rel="author" title="Mozilla Corporation">
|
||||
<link href="http://www.w3.org/TR/css3-values/#lengths" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-type-checking" rel="help">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style id="style"></style>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"unitless_zero_in_calc_is_a_numeric_type_not_length": { "assert": "invalid calc expression: unitless zero in calc() is a numeric type, not length" },
|
||||
"0px_in_calc": { "assert": "invalid calc expression: 0px in calc()" },
|
||||
"addition_of_length_and_number": { "assert": "invalid calc expression: addition of length and number" },
|
||||
"addition_of_number_and_length": { "assert": "invalid calc expression: addition of number and length" },
|
||||
"subtraction_of_length_and_number": { "assert": "invalid calc expression: subtraction of length and number" },
|
||||
"subtraction_of_number_and_length": { "assert": "invalid calc expression: subtraction of number and length" },
|
||||
"multiplication_of_length_and_number": { "assert": "invalid calc expression: multiplication of length and number" },
|
||||
"multiplication_of_number_and_length": { "assert": "invalid calc expression: multiplication of number and length" },
|
||||
"multiplication_of_length_and_length": { "assert": "invalid calc expression: multiplication of length and length" }
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
|
||||
function run() {
|
||||
var test_elt = document.getElementById("test");
|
||||
var test_cs = window.getComputedStyle(test_elt, "");
|
||||
|
||||
function description_to_name(description) {
|
||||
return description.replace(/\W+/g, "_").replace(/^_/, "").replace(/_$/, "");
|
||||
}
|
||||
|
||||
function assert_invalid_value(property, value, description) {
|
||||
test(function() {
|
||||
test_elt.style.setProperty(property, "inherit");
|
||||
test_elt.style.setProperty(property, value);
|
||||
assert_equals(test_elt.style.getPropertyValue(property),
|
||||
"inherit");
|
||||
test_elt.style.setProperty(property, value);
|
||||
test_elt.style.removeProperty(property);
|
||||
},
|
||||
description_to_name(description),
|
||||
{ assert: "invalid calc expression: " + description });
|
||||
}
|
||||
|
||||
function assert_valid_value(property, value, computes_to, description) {
|
||||
test(function() {
|
||||
test_elt.style.setProperty(property, "inherit");
|
||||
test_elt.style.setProperty(property, value);
|
||||
assert_not_equals(test_elt.style.getPropertyValue(property),
|
||||
"inherit");
|
||||
assert_equals(test_cs.getPropertyValue(property),
|
||||
computes_to);
|
||||
test_elt.style.removeProperty(property);
|
||||
},
|
||||
description_to_name(description),
|
||||
{ assert: "valid calc expression: " + description });
|
||||
}
|
||||
|
||||
assert_invalid_value("margin-left", "calc(0)",
|
||||
"unitless zero in calc() is a numeric type, not length");
|
||||
assert_valid_value("margin-left", "calc(0px)", "0px",
|
||||
"0px in calc()");
|
||||
assert_invalid_value("margin-left", "calc(1px + 2)",
|
||||
"addition of length and number");
|
||||
assert_invalid_value("margin-left", "calc(2 + 1px)",
|
||||
"addition of number and length");
|
||||
assert_invalid_value("margin-left", "calc(1px - 2)",
|
||||
"subtraction of length and number");
|
||||
assert_invalid_value("margin-left", "calc(2 - 1px)",
|
||||
"subtraction of number and length");
|
||||
assert_valid_value("margin-left", "calc(2px * 2)", "4px",
|
||||
"multiplication of length and number");
|
||||
assert_valid_value("margin-left", "calc(2 * 2px)", "4px",
|
||||
"multiplication of number and length");
|
||||
assert_invalid_value("margin-left", "calc(2px * 1px)",
|
||||
"multiplication of length and length");
|
||||
|
||||
}
|
||||
|
||||
run();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Test for vertical-align:calc()</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-vertical-align-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
|
||||
</head><body><div style="line-height: 100px; margin-top: 100px">
|
||||
<span>x</span>
|
||||
<span style="vertical-align: calc(50px)">x</span>
|
||||
<span style="vertical-align: calc(50%)">x</span>
|
||||
<span style="vertical-align: calc(25px + 50%)">x</span>
|
||||
<span style="vertical-align: calc(150% / 2 - 30px)">x</span>
|
||||
<span style="vertical-align: calc(40px + 10% - 20% / 2)">x</span>
|
||||
<span style="vertical-align: calc(40px - 10%)">x</span>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: width: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-width-block-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
p { background: green; color: white; margin: 1px 0; font-size: 10px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p style="width: calc(50% - 3px)">50% - 3px</p>
|
||||
<p style="width: calc(25% - 3px + 25%)">25% - 3px + 25%</p>
|
||||
<p style="width: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p>
|
||||
<p style="width: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p>
|
||||
<p style="width: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p>
|
||||
<p style="width: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p>
|
||||
<p style="width: calc(30% + 20%)">30% + 20%</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: intrinsic width of width: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-width-block-intrinsic-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 10px }
|
||||
body > div { float: left; clear: left;
|
||||
margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
body > div > div > div { width: 200px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><div style="width: calc(50% - 3px)"><div></div></div></div>
|
||||
<div><div style="width: calc(5em - 3px)"><div></div></div></div>
|
||||
<div><div style="width: calc(5em - 0%)"><div></div></div></div>
|
||||
<div><div style="width: calc(50%)"><div></div></div></div>
|
||||
<div><div style="width: calc(50px)"><div></div></div></div>
|
||||
<div><div style="width: calc(25% + 25%)"><div></div></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: width: calc() on table-layout: auto tables</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-width-table-auto-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
</head><body><table border="">
|
||||
<tbody><tr>
|
||||
<td style="width: calc(500px)">x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
<table border="">
|
||||
<tbody><tr>
|
||||
<td style="width: calc(50%)">x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
<table border="">
|
||||
<tbody><tr>
|
||||
<td style="width: calc(2 * 10% + 0.5 * 500px)">x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: width: calc() on table-layout: auto tables</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
|
||||
<link href="reference/calc-width-table-fixed-1-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
table { table-layout: fixed; width: 500px; border-spacing: 0 }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table border="">
|
||||
<tbody><tr>
|
||||
<td style="width: calc(500px)">x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
<table border="">
|
||||
<tbody><tr>
|
||||
<td style="width: calc(50%)">x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
<table border="">
|
||||
<tbody><tr>
|
||||
<td style="width: calc(2 * 10% + 0.5 * 500px)">x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
|
||||
|
||||
</body></html>
|
||||
38
tests/wpt/css-tests/css-values-3_dev/html/ch-unit-001.htm
Normal file
38
tests/wpt/css-tests/css-values-3_dev/html/ch-unit-001.htm
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: support for the ch unit</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<link href="https://drafts.csswg.org/css-values-3/#font-relative-lengths" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/ch-unit-001-ref.htm" rel="match">
|
||||
<meta content="The ch unit is equal to the used advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it." name="assert">
|
||||
<style>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
top: 0; bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 10ch;
|
||||
width: 5ch;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div + div {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
width: 5ch;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>00000</span></div>
|
||||
<div><span></span>00000</div>
|
||||
|
||||
</body></html>
|
||||
45
tests/wpt/css-tests/css-values-3_dev/html/chapter-1.htm
Normal file
45
tests/wpt/css-tests/css-values-3_dev/html/chapter-1.htm
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction - CSS Values and Units Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Values and Units Module Level 3 CR Test Suite</h1>
|
||||
<h2>Introduction (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#intro">1 Introduction</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#placement">1.1 Module Interactions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
117
tests/wpt/css-tests/css-values-3_dev/html/chapter-2.htm
Normal file
117
tests/wpt/css-tests/css-values-3_dev/html/chapter-2.htm
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Value Definition Syntax - CSS Values and Units Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Values and Units Module Level 3 CR Test Suite</h1>
|
||||
<h2>Value Definition Syntax (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#value-defs">2 Value Definition Syntax</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#component-types">2.1 Component value types</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1.#comb-comma">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1.#example-1c610a4c">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#component-combinators">2.2 Component value combinators</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2.#comb-all">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2.#comb-any">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2.#comb-one">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#component-multipliers">2.3 Component value multipliers</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.3.#mult-comma">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.3.#mult-num">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.3.#mult-num-range">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.3.#mult-one-plus">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.3.#mult-opt">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.3.#mult-req">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.3.#mult-zero-plus">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#combinator-multiplier-patterns">2.4 Combinator and Multiplier Patterns</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.5">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#component-whitespace">2.5 Component values and white space</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.6">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#value-examples">2.6 Property value examples</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.6.#example-ceb46dd6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.6.#propvalues">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
156
tests/wpt/css-tests/css-values-3_dev/html/chapter-3.htm
Normal file
156
tests/wpt/css-tests/css-values-3_dev/html/chapter-3.htm
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Textual Data Types - CSS Values and Units Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Values and Units Module Level 3 CR Test Suite</h1>
|
||||
<h2>Textual Data Types (3 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#textual-values">3 Textual Data Types</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#identifier">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#keywords">3.1 Pre-defined Keywords</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#example-fefeae88">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#common-keywords">3.1.1 CSS-wide keywords: initial, inherit and unset</a></th></tr>
|
||||
<!-- 3 tests -->
|
||||
<tr id="multicol-inherit-002-3.1.1" class="ahem">
|
||||
<td>
|
||||
<a href="multicol-inherit-002.htm">multicol-inherit-002</a></td>
|
||||
<td><a href="reference/multicol-inherit-002-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>'column-count' and inherit
|
||||
<ul class="assert">
|
||||
<li>This test checks that 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="multicol-rule-color-inherit-001-3.1.1" class="ahem">
|
||||
<td>
|
||||
<a href="multicol-rule-color-inherit-001.htm">multicol-rule-color-inherit-001</a></td>
|
||||
<td><a href="reference/multicol-rule-color-inherit-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>column-rule-color: inherit
|
||||
<ul class="assert">
|
||||
<li>This test checks that, by default, column-rule-color is the current color applying to the element unless reserved keyword 'inherit' is used in which case column-rule-color will be inherited from the parent's column-rule-color value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="multicol-rule-color-inherit-002-3.1.1" class="ahem">
|
||||
<td>
|
||||
<a href="multicol-rule-color-inherit-002.htm">multicol-rule-color-inherit-002</a></td>
|
||||
<td><a href="reference/multicol-rule-color-inherit-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>column-rule-color: inherit (complex)
|
||||
<ul class="assert">
|
||||
<li>This test checks that, by default, column-rule-color is the current color applying to the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.1.1.#css_wide-keywords">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#custom-idents">3.2 Author-defined Identifiers: the <custom-ident> type</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#example-4adf48cf">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#identifier-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#strings">3.3 Quoted Strings: the <string> type</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#example-a6100cec">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#example-aecae029">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#string">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#string-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#urls">3.4 Resource Locators: the <url> type</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#example-f4b87e68">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#url">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#url-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#relative-urls">3.4.1 Relative URLs</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.1.#example-b20bc0e0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#url-modifiers">3.4.2 URL Modifiers</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.2.#typedef-url-modifier">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
117
tests/wpt/css-tests/css-values-3_dev/html/chapter-4.htm
Normal file
117
tests/wpt/css-tests/css-values-3_dev/html/chapter-4.htm
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Numeric Data Types - CSS Values and Units Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Values and Units Module Level 3 CR Test Suite</h1>
|
||||
<h2>Numeric Data Types (3 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#numeric-types">4 Numeric Data Types</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#integers">4.1 Integers: the <integer> type</a></th></tr>
|
||||
<!-- 3 tests -->
|
||||
<tr id="multicol-count-non-integer-001-4.1" class="ahem invalid">
|
||||
<td>
|
||||
<a href="multicol-count-non-integer-001.htm">multicol-count-non-integer-001</a></td>
|
||||
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
||||
<td>non-integer 'column-count' value
|
||||
<ul class="assert">
|
||||
<li>This test checks that a specified real 'column-count' value is invalid and ignored.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="multicol-count-non-integer-002-4.1" class="ahem invalid">
|
||||
<td>
|
||||
<a href="multicol-count-non-integer-002.htm">multicol-count-non-integer-002</a></td>
|
||||
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
||||
<td>non-integer 'column-count' value
|
||||
<ul class="assert">
|
||||
<li>This test checks that a specified real 'column-count' value is invalid and ignored.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="multicol-count-non-integer-003-4.1" class="ahem invalid">
|
||||
<td>
|
||||
<a href="multicol-count-non-integer-003.htm">multicol-count-non-integer-003</a></td>
|
||||
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
||||
<td>non-integer 'column-count' value
|
||||
<ul class="assert">
|
||||
<li>This test checks that a specified real 'column-count' value is invalid and ignored.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s4.1.#integer">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.#integer-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#numbers">4.2 Real Numbers: the <number> type</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#number">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#number-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#percentages">4.3 Percentages: the <percentage> type</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#percentage">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#percentage-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#dimensions">4.4 Numbers with Units: dimensions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.4.#dimension">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
468
tests/wpt/css-tests/css-values-3_dev/html/chapter-5.htm
Normal file
468
tests/wpt/css-tests/css-values-3_dev/html/chapter-5.htm
Normal file
|
|
@ -0,0 +1,468 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Distance Units: the <length> type - CSS Values and Units Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Values and Units Module Level 3 CR Test Suite</h1>
|
||||
<h2>Distance Units: the <length> type (30 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#lengths">5 Distance Units: the <length> type</a></th></tr>
|
||||
<!-- 7 tests -->
|
||||
<tr id="calc-unit-analysis-5" class="primary script">
|
||||
<td><strong>
|
||||
<a href="calc-unit-analysis.htm">calc-unit-analysis</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>CSS Variables Allowed Syntax
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-circle-002-5" class="dom script">
|
||||
<td>
|
||||
<a href="shape-outside-circle-002.htm">shape-outside-circle-002</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Shape Outside Circle Valid Positions
|
||||
<ul class="assert">
|
||||
<li>A circle's position argument may be any of the valid combinations: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ].</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-circle-004-5" class="dom script">
|
||||
<td>
|
||||
<a href="shape-outside-circle-004.htm">shape-outside-circle-004</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Shape Outside Circle - Position Length Units
|
||||
<ul class="assert">
|
||||
<li>A circle's position arguments may in any valid <length> unit allowed by a <position> value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-ellipse-002-5" class="dom script">
|
||||
<td>
|
||||
<a href="shape-outside-ellipse-002.htm">shape-outside-ellipse-002</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Shape Outside Ellipse Valid Positions
|
||||
<ul class="assert">
|
||||
<li>An ellipse's position argument may be any of the valid combinations: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ].</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-ellipse-004-5" class="dom script">
|
||||
<td>
|
||||
<a href="shape-outside-ellipse-004.htm">shape-outside-ellipse-004</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Shape Outside Ellipse - Position Length Units
|
||||
<ul class="assert">
|
||||
<li>An ellipse's position arguments may in any valid <length> unit allowed by a <position> value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-inset-003-5" class="dom script">
|
||||
<td>
|
||||
<a href="shape-outside-inset-003.htm">shape-outside-inset-003</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Shape Outside Inset Valid Round Length Units
|
||||
<ul class="assert">
|
||||
<li>An inset's radial component's values can be in any length unit</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-polygon-004-5" class="dom script">
|
||||
<td>
|
||||
<a href="shape-outside-polygon-004.htm">shape-outside-polygon-004</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Shape Outside Polygon - Argument Length Units
|
||||
<ul class="assert">
|
||||
<li>A polygon's veritices may in percentage or any valid <length> units.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.#length-value">
|
||||
<!-- 1 tests -->
|
||||
<tr id="min-width-001-5.#length-value" class="">
|
||||
<td>
|
||||
<a href="min-width-001.htm">min-width-001</a></td>
|
||||
<td><a href="ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>min-width length value approximation
|
||||
<ul class="assert">
|
||||
<li>min-width length values that are too large to be supported must be clamped, rounded to infinity, or approximated, but not overflowed to a small or negative value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#relative-lengths">5.1 Relative lengths</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.#relative-length">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#font-relative-lengths">5.1.1 Font-relative lengths: the em, ex, ch, rem units</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<tr id="ch-unit-001-5.1.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="ch-unit-001.htm">ch-unit-001</a></strong></td>
|
||||
<td><a href="reference/ch-unit-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>support for the ch unit
|
||||
<ul class="assert">
|
||||
<li>The ch unit is equal to the used advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1.1.#ch">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.1.#em">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.1.#ex">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.1.#example-14cae19d">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.1.#font-relative-length">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.1.#rem">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units</a></th></tr>
|
||||
<!-- 21 tests -->
|
||||
<tr id="absolute_length_units-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="absolute_length_units.htm">absolute_length_units</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>elements should be the real world size given in mm, cm, inches...
|
||||
<ul class="assert">
|
||||
<li>elements are not displayed with the real world size units they should be, when specified in millimeters, centimeters, inches, ...</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="regions-resizing-003-5.1.2" class="ahem dom http">
|
||||
<td>
|
||||
<a href="regions-resizing-003.htm">regions-resizing-003</a></td>
|
||||
<td><a href="reference/regions-resizing-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td>
|
||||
<td>CSS Regions: resizing region that is sized using viewport units
|
||||
<ul class="assert">
|
||||
<li>Test checks that resizing the viewport of a page containing a region sized using viewport units correctly relayouts the region's contents.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="regions-resizing-007-5.1.2" class="ahem dom http">
|
||||
<td>
|
||||
<a href="regions-resizing-007.htm">regions-resizing-007</a></td>
|
||||
<td><a href="reference/regions-resizing-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td>
|
||||
<td>CSS Regions: resizing region with percentage size inside a container that has size set in viewport units
|
||||
<ul class="assert">
|
||||
<li>Test checks that resizing the viewport of a page containing a region that has a percentage size relative to a parent sized using viewport units correctly relayouts the region's contents.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="regions-resizing-009-5.1.2" class="ahem dom http">
|
||||
<td>
|
||||
<a href="regions-resizing-009.htm">regions-resizing-009</a></td>
|
||||
<td><a href="reference/regions-resizing-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td>
|
||||
<td>CSS Regions: resizing autosized region when content flowed in it is sized with viewport units
|
||||
<ul class="assert">
|
||||
<li>Test checks that resizing the viewport of a page containing an autosized region when the content flowed in it is sized with viewport units correctly relayouts the region's contents.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-calc-support-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-calc-support.htm">vh-calc-support</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewport units are supported inside calc expressions.
|
||||
<ul class="assert">
|
||||
<li>Check that viewport units add correctly to pixels in calc() expressions</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-calc-support-pct-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-calc-support-pct.htm">vh-calc-support-pct</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewport units are supported inside calc expressions.
|
||||
<ul class="assert">
|
||||
<li>Check that viewport units add correctly to percentages in calc() expressions</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-em-inherit-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-em-inherit.htm">vh-em-inherit</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>0vh and 0vw are correctly treated as 0px
|
||||
<ul class="assert">
|
||||
<li>0vh and 0vw are correctly treated as 0px</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-inherit-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-inherit.htm">vh-inherit</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewport units are inherited properly
|
||||
<ul class="assert">
|
||||
<li>Viewport units are inherited properly</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-interpolate-pct-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-interpolate-pct.htm">vh-interpolate-pct</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewport units are interpolated correctly
|
||||
<ul class="assert">
|
||||
<li>The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-interpolate-px-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-interpolate-px.htm">vh-interpolate-px</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewport units are interpolated correctly
|
||||
<ul class="assert">
|
||||
<li>The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-interpolate-vh-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-interpolate-vh.htm">vh-interpolate-vh</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewport units are interpolated correctly
|
||||
<ul class="assert">
|
||||
<li>The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-support-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-support.htm">vh-support</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewports units are supported in sizing properties
|
||||
<ul class="assert">
|
||||
<li>Viewports units are supported in sizing properties</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-support-atviewport-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-support-atviewport.htm">vh-support-atviewport</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewports units are supported in @viewport rules
|
||||
<ul class="assert">
|
||||
<li>Viewports units are supported in @viewport rules</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-support-margin-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-support-margin.htm">vh-support-margin</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewports units are supported in margin properties
|
||||
<ul class="assert">
|
||||
<li>Viewports units are supported in margin properties</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-support-transform-origin-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-support-transform-origin.htm">vh-support-transform-origin</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewports units are supported in transform properties
|
||||
<ul class="assert">
|
||||
<li>Viewports units are supported in transform properties</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-support-transform-translate-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-support-transform-translate.htm">vh-support-transform-translate</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewports units are supported in transform properties
|
||||
<ul class="assert">
|
||||
<li>Viewports units are supported in transform properties (translate)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-zero-support-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh-zero-support.htm">vh-zero-support</a></strong></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>0vh and 0vw are correctly treated as 0px
|
||||
<ul class="assert">
|
||||
<li>0vh and 0vw are correctly treated as 0px</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh_not_refreshing_on_chrome-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh_not_refreshing_on_chrome.htm">vh_not_refreshing_on_chrome</a></strong></td>
|
||||
<td><a href="reference/vh_not_refreshing_on_chrome-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>vh-based dimension doesn't change when the element's other dimension doesn't change.
|
||||
<ul class="assert">
|
||||
<li>vh-based dimension doesn't change when the element's other dimension doesn't change.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh_not_refreshing_on_chrome_iframe-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="vh_not_refreshing_on_chrome_iframe.htm">vh_not_refreshing_on_chrome_iframe</a></strong></td>
|
||||
<td><a href="reference/vh_not_refreshing_on_chrome-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>vh-based dimension doesn't change when the element other dimension doesn't change.
|
||||
<ul class="assert">
|
||||
<li>vh-based dimension doesn't change when the element other dimension doesn't change. Bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="viewport-relative-lengths-scaled-viewport-5.1.2" class="primary script">
|
||||
<td><strong>
|
||||
<a href="viewport-relative-lengths-scaled-viewport.htm">viewport-relative-lengths-scaled-viewport</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Viewport units in scaled viewport
|
||||
<ul class="assert">
|
||||
<li>viewport relative units scale with viewport.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="viewport-units-css2-001-5.1.2" class="primary script">
|
||||
<td><strong>
|
||||
<a href="viewport-units-css2-001.htm">viewport-units-css2-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Checks viewport units against CSS 2.1 properties and the CSSOM
|
||||
<ul class="assert">
|
||||
<li>Testing what happens when one applies and rereads viewport unit lengths to CSS 2.1 properties that accept length values</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1.2.#example-74b4de35">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.2.#vh">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.2.#viewport_percentage-lengths">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.2.#vmax">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.2.#vmin">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.2.#vw">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#absolute-lengths">5.2 Absolute lengths: the cm, mm, q, in, pt, pc, px units</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#absolute-length">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#cm">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#example-42a5d4eb">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#in">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#mm">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#pc">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#physical-units">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#pt">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#px">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#q">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#reference-pixel">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#visual-angle-unit">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
136
tests/wpt/css-tests/css-values-3_dev/html/chapter-6.htm
Normal file
136
tests/wpt/css-tests/css-values-3_dev/html/chapter-6.htm
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Other Quantities - CSS Values and Units Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Values and Units Module Level 3 CR Test Suite</h1>
|
||||
<h2>Other Quantities (2 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#other-units">6 Other Quantities</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#angles">6.1 Angle Units: the <angle> type and deg, grad, rad, turn units</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#angle-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#bearing-angle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#deg">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#grad">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#rad">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#turn">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#time">6.2 Duration Units: the <time> type and s, ms units</a></th></tr>
|
||||
<!-- 2 tests -->
|
||||
<tr id="transition-delay-001-6.2" class="dom script">
|
||||
<td>
|
||||
<a href="transition-delay-001.htm">transition-delay-001</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Parsing transition-delay
|
||||
<ul class="assert">
|
||||
<li>Test checks that transition-delay values are parsed properly</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-duration-001-6.2" class="dom script">
|
||||
<td>
|
||||
<a href="transition-duration-001.htm">transition-duration-001</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Parsing transition-duration
|
||||
<ul class="assert">
|
||||
<li>Test checks that transition-duration values are parsed properly</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s6.2.#ms">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#s">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#time-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#frequency">6.3 Frequency Units: the <frequency> type and Hz, kHz units</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.#frequency-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.#hz">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.#khz">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#resolution">6.4 Resolution Units: the <resolution> type and dpi, dpcm, dppx units</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.4.#dpcm">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.4.#dpi">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.4.#dppx">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.4.#example-0c0bf820">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.4.#resolution-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
57
tests/wpt/css-tests/css-values-3_dev/html/chapter-7.htm
Normal file
57
tests/wpt/css-tests/css-values-3_dev/html/chapter-7.htm
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Data Types Defined Elsewhere - CSS Values and Units Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Values and Units Module Level 3 CR Test Suite</h1>
|
||||
<h2>Data Types Defined Elsewhere (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#defined-elsewhere">7 Data Types Defined Elsewhere</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#colors">7.1 Colors: the <color> type</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#images">7.2 Images: the <image> type</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#position">7.3 2D Positioning: the <position> type</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
418
tests/wpt/css-tests/css-values-3_dev/html/chapter-8.htm
Normal file
418
tests/wpt/css-tests/css-values-3_dev/html/chapter-8.htm
Normal file
|
|
@ -0,0 +1,418 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Functional Notations - CSS Values and Units Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Values and Units Module Level 3 CR Test Suite</h1>
|
||||
<h2>Functional Notations (32 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#functional-notations">8 Functional Notations</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#example-9de05e52">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#functional-notation">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#calc-notation">8.1 Mathematical Expressions: calc()</a></th></tr>
|
||||
<!-- 31 tests -->
|
||||
<tr id="calc-background-image-gradient-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-background-image-gradient-1.htm">calc-background-image-gradient-1</a></strong></td>
|
||||
<td><a href="reference/calc-background-image-gradient-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for calc() on background-image gradients
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-background-linear-gradient-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-background-linear-gradient-1.htm">calc-background-linear-gradient-1</a></strong></td>
|
||||
<td><a href="reference/calc-background-linear-gradient-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Support calc() on gradient stop positions
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-background-position-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-background-position-1.htm">calc-background-position-1</a></strong></td>
|
||||
<td><a href="reference/calc-background-position-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for calc() on background-position
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-background-size-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-background-size-1.htm">calc-background-size-1</a></strong></td>
|
||||
<td><a href="reference/calc-background-size-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for calc() on background-size
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-border-radius-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-border-radius-1.htm">calc-border-radius-1</a></strong></td>
|
||||
<td><a href="reference/calc-border-radius-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>test for border-radius: calc()
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-height-block-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-height-block-1.htm">calc-height-block-1</a></strong></td>
|
||||
<td><a href="reference/calc-height-block-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for height:calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-height-table-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-height-table-1.htm">calc-height-table-1</a></strong></td>
|
||||
<td><a href="reference/calc-height-table-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test that height:calc() with no percentages has an effect on inner table elements
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-margin-block-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-margin-block-1.htm">calc-margin-block-1</a></strong></td>
|
||||
<td><a href="reference/calc-margin-block-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test of margin-*: calc()
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-max-height-block-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-max-height-block-1.htm">calc-max-height-block-1</a></strong></td>
|
||||
<td><a href="reference/calc-max-height-block-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for max-height:calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-max-width-block-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-max-width-block-1.htm">calc-max-width-block-1</a></strong></td>
|
||||
<td><a href="reference/calc-width-block-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>max-width: calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-max-width-block-intrinsic-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-max-width-block-intrinsic-1.htm">calc-max-width-block-intrinsic-1</a></strong></td>
|
||||
<td><a href="reference/calc-max-width-block-intrinsic-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>intrinsic width of max-width: calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-min-height-block-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-min-height-block-1.htm">calc-min-height-block-1</a></strong></td>
|
||||
<td><a href="reference/calc-height-block-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for min-height:calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-min-width-block-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-min-width-block-1.htm">calc-min-width-block-1</a></strong></td>
|
||||
<td><a href="reference/calc-width-block-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>min-width: calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-min-width-block-intrinsic-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-min-width-block-intrinsic-1.htm">calc-min-width-block-intrinsic-1</a></strong></td>
|
||||
<td><a href="reference/calc-min-width-block-intrinsic-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>intrinsic width of min-width: calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-offsets-absolute-bottom-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-offsets-absolute-bottom-1.htm">calc-offsets-absolute-bottom-1</a></strong></td>
|
||||
<td><a href="reference/calc-offsets-absolute-top-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for bottom:calc() on absolutely positioned elements
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-offsets-absolute-left-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-offsets-absolute-left-1.htm">calc-offsets-absolute-left-1</a></strong></td>
|
||||
<td><a href="reference/calc-offsets-relative-left-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for left:calc() on absolutely positioned elements
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-offsets-absolute-right-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-offsets-absolute-right-1.htm">calc-offsets-absolute-right-1</a></strong></td>
|
||||
<td><a href="reference/calc-offsets-relative-left-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for right:calc() on absolutely positioned elements
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-offsets-absolute-top-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-offsets-absolute-top-1.htm">calc-offsets-absolute-top-1</a></strong></td>
|
||||
<td><a href="reference/calc-offsets-absolute-top-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for top:calc() on absolutely positioned elements
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-offsets-relative-bottom-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-offsets-relative-bottom-1.htm">calc-offsets-relative-bottom-1</a></strong></td>
|
||||
<td><a href="reference/calc-offsets-relative-top-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for bottom:calc() on relatively positioned elements
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-offsets-relative-left-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-offsets-relative-left-1.htm">calc-offsets-relative-left-1</a></strong></td>
|
||||
<td><a href="reference/calc-offsets-relative-left-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for left:calc() on relatively positioned elements
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-offsets-relative-right-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-offsets-relative-right-1.htm">calc-offsets-relative-right-1</a></strong></td>
|
||||
<td><a href="reference/calc-offsets-relative-left-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for right:calc() on relatively positioned elements
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-offsets-relative-top-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-offsets-relative-top-1.htm">calc-offsets-relative-top-1</a></strong></td>
|
||||
<td><a href="reference/calc-offsets-relative-top-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for top:calc() on relatively positioned elements
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-padding-block-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-padding-block-1.htm">calc-padding-block-1</a></strong></td>
|
||||
<td><a href="reference/calc-padding-block-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test of padding-*: calc()
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-text-indent-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-text-indent-1.htm">calc-text-indent-1</a></strong></td>
|
||||
<td><a href="reference/calc-text-indent-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>text-indent: calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-text-indent-intrinsic-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-text-indent-intrinsic-1.htm">calc-text-indent-intrinsic-1</a></strong></td>
|
||||
<td><a href="reference/calc-text-indent-intrinsic-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>intrinsic width of text-indent: calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-transform-origin-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-transform-origin-1.htm">calc-transform-origin-1</a></strong></td>
|
||||
<td><a href="reference/calc-transform-origin-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for calc() on transform-origin
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-vertical-align-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-vertical-align-1.htm">calc-vertical-align-1</a></strong></td>
|
||||
<td><a href="reference/calc-vertical-align-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Test for vertical-align:calc()
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-width-block-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-width-block-1.htm">calc-width-block-1</a></strong></td>
|
||||
<td><a href="reference/calc-width-block-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>width: calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-width-block-intrinsic-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-width-block-intrinsic-1.htm">calc-width-block-intrinsic-1</a></strong></td>
|
||||
<td><a href="reference/calc-width-block-intrinsic-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>intrinsic width of width: calc() on blocks
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-width-table-auto-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-width-table-auto-1.htm">calc-width-table-auto-1</a></strong></td>
|
||||
<td><a href="reference/calc-width-table-auto-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>width: calc() on table-layout: auto tables
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="calc-width-table-fixed-1-8.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="calc-width-table-fixed-1.htm">calc-width-table-fixed-1</a></strong></td>
|
||||
<td><a href="reference/calc-width-table-fixed-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>width: calc() on table-layout: auto tables
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s8.1.#example-0bd12a8e">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.#example-2b4e561f">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.#example-6e868f9c">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.#example-776de6b9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.#example-f570e599">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.#funcdef-calc">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#calc-syntax">8.1.1 Syntax</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.1.#typedef-calc-product">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.1.#typedef-calc-sum">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.1.#typedef-calc-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.1.#typedef-dimension">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.1.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#calc-type-checking">8.1.2 Type Checking</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<tr id="calc-unit-analysis-8.1.2" class="script">
|
||||
<td>
|
||||
<a href="calc-unit-analysis.htm">calc-unit-analysis</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>CSS Variables Allowed Syntax
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s8.1.2.#resolved-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.1.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#calc-computed-value">8.1.3 Computed Value</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.3.#example-240b0ace">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.1.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#calc-range">8.1.4 Range Checking</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.4.#example-02a3b71f">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#toggle-notation">8.2 Toggling Between Values: toggle()</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2.#example-17046e65">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2.#example-349c53dd">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2.#example-851607de">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2.#example-9492bba0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2.#funcdef-toggle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2.#typedef-toggle-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#attr-notation">8.3 Attribute References: attr()</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3.#example-0366e27a">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3.#example-4771a1ff">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3.#funcdef-attr">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3.#typedef-attr-fallback">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3.#typedef-attr-name">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3.#typedef-type-or-unit">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
207
tests/wpt/css-tests/css-values-3_dev/html/chapter-9.htm
Normal file
207
tests/wpt/css-tests/css-values-3_dev/html/chapter-9.htm
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Appendix A: IANA Considerations - CSS Values and Units Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Values and Units Module Level 3 CR Test Suite</h1>
|
||||
<h2>Appendix A: IANA Considerations (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#iana">9 Appendix A: IANA Considerations</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-values/#about-invalid">9.1 Registration for the about:invalid URL scheme</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#acknowledgments">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-compositing-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-animations-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-backgrounds-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-break-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-cascade-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-color-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-color-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-counter-styles-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-fonts-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-images-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-overflow-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-syntax-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-text-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-text-decor-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-transitions-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-ui-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3-fonts">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3-images">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3bg">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3cascade">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3color">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3namespace">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3page">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3syn">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-dom-ls">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-filters-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-mediaq">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-mediaqueries-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-rfc2119">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-rfc6694">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-selectors-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-url">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#changes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance-classes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conventions">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#example-f839f6c8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#experimental">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index-defined-elsewhere">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index-defined-here">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#informative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#normative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#partial">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#subtitle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#testing">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#title">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#w3c_process_revision">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
tests/wpt/css-tests/css-values-3_dev/html/min-width-001.htm
Normal file
30
tests/wpt/css-tests/css-values-3_dev/html/min-width-001.htm
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html SYSTEM "about:legacy-compat">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: min-width length value approximation</title>
|
||||
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width">
|
||||
<link rel="help" href="http://www.w3.org/TR/mediaqueries-4/#width">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#length-value">
|
||||
<link rel="match" href="ref.htm">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="min-width length values that are too large to be supported must be clamped, rounded to infinity, or approximated, but not overflowed to a small or negative value.">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
@media (min-width: 9999999999px) {
|
||||
div {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: non-integer 'column-count' value</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type">
|
||||
<link rel="match" href="reference/multicol-columns-invalid-001-ref.htm">
|
||||
<meta name="flags" content="ahem invalid">
|
||||
<meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored.">
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-count: 2.1; /* invalid; must be an integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: non-integer 'column-count' value</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type">
|
||||
<link rel="match" href="reference/multicol-columns-invalid-001-ref.htm">
|
||||
<meta name="flags" content="ahem invalid">
|
||||
<meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored.">
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-count: 1.9; /* invalid; must be an integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: non-integer 'column-count' value</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type">
|
||||
<link rel="match" href="reference/multicol-columns-invalid-001-ref.htm">
|
||||
<meta name="flags" content="ahem invalid">
|
||||
<meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored.">
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-count: 2.0; /* invalid; must be an integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: 'column-count' and inherit</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-08 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'">
|
||||
<link rel="match" href="reference/multicol-inherit-002-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="This test checks that 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'.">
|
||||
<style type="text/css">
|
||||
body > div
|
||||
{
|
||||
background-color: blue;
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 32em;
|
||||
|
||||
/*
|
||||
N == 3;
|
||||
|
||||
32em
|
||||
- 2em : 2 column gaps
|
||||
==========
|
||||
30em : available width of the 3 inner multi-column elements
|
||||
|
||||
So, W == 10em;
|
||||
|
||||
30em
|
||||
- 6em : 3 mult by 2em: horizontal margin of 3 inner multi-column elements
|
||||
- 6em : 3 mult by 2em: horizontal column-gaps of all 3 inner multi-column elements
|
||||
==========
|
||||
18em : 6em for each of the 3 column boxes without their own horizontal margins
|
||||
So, each column boxes of inner multi-column elements is 2em wide.
|
||||
*/
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
color: black;
|
||||
margin: 1em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
|
||||
div > div
|
||||
{
|
||||
background-color: yellow;
|
||||
column-count: inherit;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
div > div:first-child {margin-top: 0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
aa aa
|
||||
aa aa
|
||||
aa aa
|
||||
aa aa
|
||||
</div>
|
||||
<div>
|
||||
mm mm
|
||||
mm mm
|
||||
mm mm
|
||||
mm mm
|
||||
</div>
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: column-rule-color: inherit</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-09-02 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. 'column-rule-color'">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'">
|
||||
<link rel="match" href="reference/multicol-rule-color-inherit-001-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="This test checks that, by default, column-rule-color is the current color applying to the element unless reserved keyword 'inherit' is used in which case column-rule-color will be inherited from the parent's column-rule-color value.">
|
||||
<style type="text/css">
|
||||
div#parent
|
||||
{
|
||||
column-rule-color: green;
|
||||
column-rule-style: none;
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 17em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
N == 3;
|
||||
|
||||
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
|
||||
W == max(0, (17em - ((3 - 1) * 1em)) / 3);
|
||||
W == max(0, (17em - (2 * 1em)) / 3);
|
||||
W == max(0, (17em - 2em) / 3);
|
||||
W == max(0, 15em / 3);
|
||||
W == max(0, 5em);
|
||||
W == 5em;
|
||||
|
||||
The height of column rule depends on number of line boxes in
|
||||
each outer column box which depends on number of line boxes
|
||||
in each inner column box.
|
||||
|
||||
N == 3;
|
||||
|
||||
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
|
||||
W == max(0, (5em - ((3 - 1) * 1em)) / 3);
|
||||
W == max(0, (5em - (2 * 1em)) / 3);
|
||||
W == max(0, (5em - 2em) / 3);
|
||||
W == max(0, 3em / 3);
|
||||
W == max(0, 1em);
|
||||
W == 1em;
|
||||
|
||||
*/
|
||||
|
||||
div
|
||||
{
|
||||
color: red; /* both div#parent and div.child have and use 'color: red' */
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
column-rule-width: 1em;
|
||||
}
|
||||
|
||||
div.child
|
||||
{
|
||||
column-rule-color: inherit;
|
||||
column-rule-style: solid;
|
||||
font-size: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="parent">
|
||||
<div class="child">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="child">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="child">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: column-rule-color: inherit (complex)</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-09-03 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. 'column-rule-color'">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'">
|
||||
<link rel="match" href="reference/multicol-rule-color-inherit-001-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="This test checks that, by default, column-rule-color is the current color applying to the element.">
|
||||
<style type="text/css">
|
||||
div#parent
|
||||
{
|
||||
color: green;
|
||||
font: 1.25em/1 Ahem;
|
||||
}
|
||||
|
||||
div.child
|
||||
{
|
||||
color: red;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
width: 5em;
|
||||
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
column-rule-color: inherit;
|
||||
column-rule-style: solid;
|
||||
column-rule-width: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
N == 3;
|
||||
|
||||
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
|
||||
W == max(0, (5em - ((3 - 1) * 1em)) / 3);
|
||||
W == max(0, (5em - (2 * 1em)) / 3);
|
||||
W == max(0, (5em - 2em) / 3);
|
||||
W == max(0, 3em / 3);
|
||||
W == max(0, 1em);
|
||||
W == 1em;
|
||||
|
||||
*/
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="parent">
|
||||
<div class="child">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="child">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="child">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
18
tests/wpt/css-tests/css-values-3_dev/html/ref.htm
Normal file
18
tests/wpt/css-tests/css-values-3_dev/html/ref.htm
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
background-color:green;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<html style="background: green"><head></head><body></body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test for calc() on background-image gradients</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
height: 50px; width: 200px;
|
||||
border: thin solid;
|
||||
}
|
||||
|
||||
#one { background-image: radial-gradient(circle farthest-side at 150px 20px, red, green); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="one"></p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Support calc() on gradient stop positions</title>
|
||||
<link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935" rel="author" title="Yu-Sian (Thomasy) Liu">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background:red;
|
||||
margin:5px 0 0 5px;
|
||||
float:left;
|
||||
}
|
||||
div#one {
|
||||
background: linear-gradient(lime 0px, lime 90px, blue 90px, blue 100%);
|
||||
}
|
||||
div#two {
|
||||
background: linear-gradient(blue 0px ,green 30px ,red 40px ,white 60px , lime 80px);
|
||||
}
|
||||
div#three {
|
||||
background: linear-gradient(blue 0px ,purple 20px ,red 40px ,blue 60px , lime 80px);
|
||||
}
|
||||
div#four {
|
||||
background: linear-gradient(blue 0px ,green 30px ,red 40px ,blue 60px , yellow 80px);
|
||||
}
|
||||
div#five {
|
||||
background: linear-gradient(red 0px ,green 30px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="one">1</div>
|
||||
<div id="two">2</div>
|
||||
<div id="three">3</div>
|
||||
<div id="four">4</div>
|
||||
<div id="five">5</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test for calc() on background-position</title>
|
||||
<link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
height: 50px; width: 200px;
|
||||
border: thin solid;
|
||||
background-image: url(../backgrounds/blue-32x32.png);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#one { background-position: 134px -12px }
|
||||
#two { background-position: -18px -19px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="one"></p>
|
||||
<p id="two"></p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test for calc() on background-size</title>
|
||||
<link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
height: 50px; width: 200px;
|
||||
border: thin solid;
|
||||
background-image: url(../backgrounds/blue-32x32.png);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#one { background-size: 150px 20px; }
|
||||
#two { background-image: none }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="one"></p>
|
||||
<p id="two"></p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: test for border-radius: calc()</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
height: 256px;
|
||||
width: 512px;
|
||||
background: blue;
|
||||
border-radius: 21px 6px 12px 29px / 5px 16px 10px 3px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p></p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test for height:calc() or min-height:calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; width: 1px; background: blue; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div style="height: 50px"></div>
|
||||
<div style="height: 50px"></div>
|
||||
<div style="height: 75px"></div>
|
||||
<div style="height: 45px"></div>
|
||||
<div style="height: 40px"></div>
|
||||
<div style="height: 30px"></div>
|
||||
|
||||
<!-- tests with an auto-height container -->
|
||||
<div style="height: 50px"></div>
|
||||
<div style="height: 10px"></div>
|
||||
<div style="height: 10px"></div>
|
||||
<div style="height: 10px"></div>
|
||||
<div style="height: 10px"></div>
|
||||
<div style="height: 10px"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test that height:calc() with no percentages has an effect on inner table elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
tbody, tr, td {
|
||||
height: 500px;
|
||||
min-height: 700px;
|
||||
max-height: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table border="">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>cell</td>
|
||||
<td>cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cell</td>
|
||||
<td>cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test of margin-*: calc()</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
div { border: medium solid green; width: 500px }
|
||||
p { background: yellow }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><p style="margin: 15px 0 0 0">paragraph with margin</p></div>
|
||||
<div><p style="margin: 0 15px 0 0">paragraph with margin</p></div>
|
||||
<div><p style="margin: 0 0 15px 0">paragraph with margin</p></div>
|
||||
<div><p style="margin: 0 0 0 15px">paragraph with margin</p></div>
|
||||
<div><p style="margin: 25px 25px 25px 25px">paragraph with margin</p></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test for max-height:calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; width: 1px; background: blue; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div style="height: 50px"></div>
|
||||
<div style="height: 50px"></div>
|
||||
<div style="height: 75px"></div>
|
||||
<div style="height: 45px"></div>
|
||||
<div style="height: 40px"></div>
|
||||
<div style="height: 30px"></div>
|
||||
|
||||
<!-- tests with an auto-height container -->
|
||||
<div style="height: 50px"></div>
|
||||
<div style="height: 300px"></div>
|
||||
<div style="height: 300px"></div>
|
||||
<div style="height: 300px"></div>
|
||||
<div style="height: 300px"></div>
|
||||
<div style="height: 300px"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: intrinsic width of max-width: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="width: 400px"></div>
|
||||
<div style="width: 47px"></div>
|
||||
<div style="width: 400px"></div>
|
||||
<div style="width: 400px"></div>
|
||||
<div style="width: 50px"></div>
|
||||
<div style="width: 400px"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: intrinsic width of min-width: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="width: 1px"></div>
|
||||
<div style="width: 47px"></div>
|
||||
<div style="width: 1px"></div>
|
||||
<div style="width: 1px"></div>
|
||||
<div style="width: 50px"></div>
|
||||
<div style="width: 1px"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test for top:calc() on absolutely positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 3px; }
|
||||
div[style] { background: blue; position: relative; height: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div><div style="top: 50px"></div></div>
|
||||
<div><div style="top: 50px"></div></div>
|
||||
<div><div style="top: 75px"></div></div>
|
||||
<div><div style="top: 45px"></div></div>
|
||||
<div><div style="top: 40px"></div></div>
|
||||
<div><div style="top: 30px"></div></div>
|
||||
|
||||
<!-- tests with an auto-top container -->
|
||||
<div><div style="top: 50px"></div></div>
|
||||
<div><div style="top: 50px"></div></div>
|
||||
<div><div style="top: 75px"></div></div>
|
||||
<div><div style="top: 45px"></div></div>
|
||||
<div><div style="top: 40px"></div></div>
|
||||
<div><div style="top: 30px"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test for left:calc() on relatively positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 100px; width: 100px }
|
||||
div[style] { background: blue; position: relative; height: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="left: 50px"></div>
|
||||
<div style="left: -50px"></div>
|
||||
<div style="left: 75px"></div>
|
||||
<div style="left: -45px"></div>
|
||||
<div style="left: 40px"></div>
|
||||
<div style="left: -30px"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test for top:calc() on relatively positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 3px; }
|
||||
div[style] { background: blue; position: relative; height: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- tests with a fixed-height container -->
|
||||
<div><div style="top: 50px"></div></div>
|
||||
<div><div style="top: 50px"></div></div>
|
||||
<div><div style="top: 75px"></div></div>
|
||||
<div><div style="top: 45px"></div></div>
|
||||
<div><div style="top: 40px"></div></div>
|
||||
<div><div style="top: 30px"></div></div>
|
||||
|
||||
<!-- tests with an auto-top container -->
|
||||
<div><div style="top: 50px"></div></div>
|
||||
<div><div style="top: 0px"></div></div>
|
||||
<div><div style="top: 0px"></div></div>
|
||||
<div><div style="top: 0px"></div></div>
|
||||
<div><div style="top: 0px"></div></div>
|
||||
<div><div style="top: 0px"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test of padding-*: calc()</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
div { border: medium solid green }
|
||||
p { background: yellow; margin: 0 }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="padding: 15px 0 0 0"><p>paragraph with padding</p></div>
|
||||
<div style="padding: 0 15px 0 0"><p>paragraph with padding</p></div>
|
||||
<div style="padding: 0 0 15px 0"><p>paragraph with padding</p></div>
|
||||
<div style="padding: 0 0 0 15px"><p>paragraph with padding</p></div>
|
||||
<div style="padding: 25px 25px 25px 25px"><p>paragraph with padding</p></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: text-indent: calc()</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
p { font-size: 10px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p style="text-indent: 247px">50% - 3px</p>
|
||||
<p style="text-indent: 247px">25% - 3px + 25%</p>
|
||||
<p style="text-indent: 247px">25% - 3px + 12.5% * 2</p>
|
||||
<p style="text-indent: 247px">25% - 3px + 12.5%*2</p>
|
||||
<p style="text-indent: 247px">25% - 3px + 2*12.5%</p>
|
||||
<p style="text-indent: 247px">25% - 3px + 2 * 12.5%</p>
|
||||
<p style="text-indent: 250px">30% + 20%</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: intrinsic width of text-indent: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="width: 10px"></div>
|
||||
<div style="width: 57px"></div>
|
||||
<div style="width: 10px"></div>
|
||||
<div style="width: 10px"></div>
|
||||
<div style="width: 60px"></div>
|
||||
<div style="width: 10px"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test for calc() on transform-origin</title>
|
||||
<link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { margin: 100px }
|
||||
|
||||
p {
|
||||
height: 50px; width: 200px;
|
||||
background: yellow;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
#one { transform-origin: 150px 20px; }
|
||||
#two { transform-origin: -22px -35px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="one">hello</p>
|
||||
<p id="two">hello</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: Test for vertical-align:calc()</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
|
||||
</head><body><div style="line-height: 100px; margin-top: 100px">
|
||||
<span>x</span>
|
||||
<span style="vertical-align: 50px">x</span>
|
||||
<span style="vertical-align: 50px">x</span>
|
||||
<span style="vertical-align: 75px">x</span>
|
||||
<span style="vertical-align: 45px">x</span>
|
||||
<span style="vertical-align: 40px">x</span>
|
||||
<span style="vertical-align: 30px">x</span>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: width: calc() and min-width: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
p { background: green; color: white; margin: 1px 0; font-size: 10px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p style="width: 247px">50% - 3px</p>
|
||||
<p style="width: 247px">25% - 3px + 25%</p>
|
||||
<p style="width: 247px">25% - 3px + 12.5% * 2</p>
|
||||
<p style="width: 247px">25% - 3px + 12.5%*2</p>
|
||||
<p style="width: 247px">25% - 3px + 2*12.5%</p>
|
||||
<p style="width: 247px">25% - 3px + 2 * 12.5%</p>
|
||||
<p style="width: 250px">30% + 20%</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: intrinsic width of width: calc() on blocks</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
|
||||
body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="width: 200px"></div>
|
||||
<div style="width: 47px"></div>
|
||||
<div style="width: 200px"></div>
|
||||
<div style="width: 200px"></div>
|
||||
<div style="width: 50px"></div>
|
||||
<div style="width: 200px"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: width: calc() on table-layout: auto tables</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
</head><body><table border="">
|
||||
<tbody><tr>
|
||||
<td style="width: 500px">x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
<table border="">
|
||||
<tbody><tr>
|
||||
<td>x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
<table border="">
|
||||
<tbody><tr>
|
||||
<td>x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reference: width: calc() on table-layout: auto tables</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<meta content="" name="flags">
|
||||
<style type="text/css">
|
||||
table { table-layout: fixed; width: 500px; border-spacing: 0 }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table border="">
|
||||
<tbody><tr>
|
||||
<td style="width: 500px">x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
<table border="">
|
||||
<tbody><tr>
|
||||
<td>x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
<table border="">
|
||||
<tbody><tr>
|
||||
<td>x</td>
|
||||
<td style="width: 100px">y</td>
|
||||
</tr></tbody></table>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Values and Units Test Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<meta content="" name="flags">
|
||||
<style>
|
||||
div {
|
||||
background: green;
|
||||
height: 10ch;
|
||||
width: 10ch;
|
||||
float: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-26 -->
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
background-color: yellow;
|
||||
border-spacing: 0px;
|
||||
border: gray solid 1em;
|
||||
font: 1.25em/1 serif;
|
||||
}
|
||||
|
||||
td {padding: 0 1em 0 0;}
|
||||
|
||||
img, td {vertical-align: top;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td>
|
||||
<td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"></td>
|
||||
<td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"></td>
|
||||
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-08 -->
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
font: 1.25em/1 serif;
|
||||
margin: 1em;
|
||||
padding: 0em 1em 1em;
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
img {vertical-align: top;}
|
||||
|
||||
img.column-gap
|
||||
{
|
||||
margin-left: -2em;
|
||||
margin-right: 3em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
img#last
|
||||
{
|
||||
margin-left: -2em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img id="last" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-09-03 -->
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div {font-size: 1.25em;}
|
||||
img {padding-left: 1em;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p>
|
||||
|
||||
<div>
|
||||
<img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<p>The test also fails if the there's a green block that is <strong>not</strong> a square (e.g. rectangle or polygon).</p>
|
||||
<iframe width="160" height="400" frameborder="0" src="../support/80px-block-ref.html"></iframe>
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="UTF-8">
|
||||
<title>One region in body</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.content {
|
||||
margin: 10px;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx
|
||||
</div>
|
||||
<div class="content">
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="UTF-8">
|
||||
<title>One region in body</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="UTF-8">
|
||||
<title>One region in body</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
CSS Global Support Directory
|
||||
============================
|
||||
|
||||
This directory contains common support files (such as images and external
|
||||
style sheets). These are sync'ed into the support directories of all our
|
||||
test suites. If you have test-suite-specific support files, please add
|
||||
them to the appropriate test-suite-specific support/ directory.
|
||||
|
||||
If you add to a support/ directory, please run the tools/supportprop.py
|
||||
script from the top of the repository to cascade support files into the
|
||||
lower-level support directories.
|
||||
|
||||
Description of the Common Support File Collection
|
||||
-------------------------------------------------
|
||||
|
||||
The 1x1-* images are all exactly one pixel.
|
||||
|
||||
The swatch-* images all use 15x15 cells.
|
||||
|
||||
The square-* images all use 15x15 cells with one pixel borders.
|
||||
|
||||
The pattern-* images use cells of various sizes:
|
||||
|
||||
pattern-gg-gr.png 20x20
|
||||
pattern-grg-rgr-grg.png 20x20
|
||||
pattern-rgr-grg-rgr.png 20x20
|
||||
pattern-tr.png 15x15
|
||||
pattern-grg-rrg-rgg.png 15x15
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
.a { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.b { color: green; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
|
|
@ -0,0 +1 @@
|
|||
.c { color: red; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,231 @@
|
|||
(function(root) {
|
||||
'use strict';
|
||||
//
|
||||
var index = 0;
|
||||
var suite = root.generalParallelTest = {
|
||||
// prepare individual test
|
||||
setup: function(data, options) {
|
||||
suite._setupDom(data, options);
|
||||
suite._setupEvents(data, options);
|
||||
},
|
||||
// clone fixture and prepare data containers
|
||||
_setupDom: function(data, options) {
|
||||
// clone fixture into off-viewport test-canvas
|
||||
data.fixture = document.getElementById('fixture').cloneNode(true);
|
||||
data.fixture.id = 'test-' + (index++);
|
||||
(document.getElementById('offscreen') || document.body).appendChild(data.fixture);
|
||||
|
||||
// data container for #fixture > .container > .transition
|
||||
data.transition = {
|
||||
node: data.fixture.querySelector('.transition'),
|
||||
values: [],
|
||||
events: [],
|
||||
computedStyle: function(property) {
|
||||
return computedStyle(data.transition.node, property);
|
||||
}
|
||||
};
|
||||
|
||||
// data container for #fixture > .container
|
||||
data.container = {
|
||||
node: data.transition.node.parentNode,
|
||||
values: [],
|
||||
events: [],
|
||||
computedStyle: function(property) {
|
||||
return computedStyle(data.container.node, property);
|
||||
}
|
||||
};
|
||||
|
||||
// data container for #fixture > .container > .transition[:before | :after]
|
||||
if (data.pseudo) {
|
||||
data.pseudo = {
|
||||
name: data.pseudo,
|
||||
values: [],
|
||||
computedStyle: function(property) {
|
||||
return computedStyle(data.transition.node, property, ':' + data.pseudo.name);
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
// bind TransitionEnd event listeners
|
||||
_setupEvents: function(data, options) {
|
||||
['transition', 'container'].forEach(function(elem) {
|
||||
var handler = function(event) {
|
||||
event.stopPropagation();
|
||||
var name = event.propertyName;
|
||||
var time = Math.round(event.elapsedTime * 1000) / 1000;
|
||||
var pseudo = event.pseudoElement ? (':' + event.pseudoElement) : '';
|
||||
data[elem].events.push(name + pseudo + ":" + time + "s");
|
||||
};
|
||||
data[elem].node.addEventListener('transitionend', handler, false);
|
||||
data[elem]._events = {'transitionend': handler};
|
||||
});
|
||||
},
|
||||
// cleanup after individual test
|
||||
teardown: function(data, options) {
|
||||
// data.fixture.remove();
|
||||
if (data.fixture.parentNode) {
|
||||
data.fixture.parentNode.removeChild(data.fixture);
|
||||
}
|
||||
},
|
||||
// invoked prior to running a slice of tests
|
||||
sliceStart: function(options, tests) {
|
||||
// inject styles into document
|
||||
setStyle(options.styles);
|
||||
// kick off value collection loop
|
||||
generalParallelTest.startValueCollection(options);
|
||||
},
|
||||
// invoked after running a slice of tests
|
||||
sliceDone: function(options, tests) {
|
||||
// stop value collection loop
|
||||
generalParallelTest.stopValueCollection(options);
|
||||
// reset styles cache
|
||||
options.styles = {};
|
||||
},
|
||||
// called once all tests are done
|
||||
done: function(options) {
|
||||
// reset document styles
|
||||
setStyle();
|
||||
reflow();
|
||||
},
|
||||
// add styles of individual test to slice cache
|
||||
addStyles: function(data, options, styles) {
|
||||
if (!options.styles) {
|
||||
options.styles = {};
|
||||
}
|
||||
|
||||
Object.keys(styles).forEach(function(key) {
|
||||
var selector = '#' + data.fixture.id
|
||||
// fixture must become #fixture.fixture rather than a child selector
|
||||
+ (key.substring(0, 8) === '.fixture' ? '' : ' ')
|
||||
+ key;
|
||||
|
||||
options.styles[selector] = styles[key];
|
||||
});
|
||||
},
|
||||
// set style and compute values for container and transition
|
||||
getStyle: function(data) {
|
||||
reflow();
|
||||
// grab current styles: "initial state"
|
||||
suite._getStyleFor(data, 'from');
|
||||
// apply target state
|
||||
suite._addClass(data, 'to', true);
|
||||
// grab current styles: "target state"
|
||||
suite._getStyleFor(data, 'to');
|
||||
// remove target state
|
||||
suite._removeClass(data, 'to', true);
|
||||
|
||||
// clean up the mess created for value collection
|
||||
data.container._values = [];
|
||||
data.transition._values = [];
|
||||
if (data.pseudo) {
|
||||
data.pseudo._values = [];
|
||||
}
|
||||
},
|
||||
// grab current styles and store in respective element's data container
|
||||
_getStyleFor: function(data, key) {
|
||||
data.container[key] = data.container.computedStyle(data.property);
|
||||
data.transition[key] = data.transition.computedStyle(data.property);
|
||||
if (data.pseudo) {
|
||||
data.pseudo[key] = data.pseudo.computedStyle(data.property);
|
||||
}
|
||||
},
|
||||
// add class to test's elements and possibly reflow
|
||||
_addClass: function(data, className, forceReflow) {
|
||||
data.container.node.classList.add(className);
|
||||
data.transition.node.classList.add(className);
|
||||
if (forceReflow) {
|
||||
reflow();
|
||||
}
|
||||
},
|
||||
// remove class from test's elements and possibly reflow
|
||||
_removeClass: function(data, className, forceReflow) {
|
||||
data.container.node.classList.remove(className);
|
||||
data.transition.node.classList.remove(className);
|
||||
if (forceReflow) {
|
||||
reflow();
|
||||
}
|
||||
},
|
||||
// add transition and to classes to container and transition
|
||||
startTransition: function(data) {
|
||||
// add transition-defining class
|
||||
suite._addClass(data, 'how', true);
|
||||
// add target state (without reflowing)
|
||||
suite._addClass(data, 'to', false);
|
||||
},
|
||||
// requestAnimationFrame runLoop to collect computed values
|
||||
startValueCollection: function(options) {
|
||||
var raf = window.requestAnimationFrame || function(callback){
|
||||
setTimeout(callback, 20);
|
||||
};
|
||||
|
||||
// flag denoting if the runLoop should continue (true) or exit (false)
|
||||
options._collectValues = true;
|
||||
|
||||
function runLoop() {
|
||||
if (!options._collectValues) {
|
||||
// test's are done, stop annoying the CPU
|
||||
return;
|
||||
}
|
||||
|
||||
// collect current style for test's elements
|
||||
options.tests.forEach(function(data) {
|
||||
if (!data.property) {
|
||||
return;
|
||||
}
|
||||
|
||||
['transition', 'container', 'pseudo'].forEach(function(elem) {
|
||||
var pseudo = null;
|
||||
if (!data[elem] || (elem === 'pseudo' && !data.pseudo)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var current = data[elem].computedStyle(data.property);
|
||||
var values = data[elem].values;
|
||||
var length = values.length;
|
||||
if (!length || values[length - 1] !== current) {
|
||||
values.push(current);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// rinse and repeat
|
||||
raf(runLoop);
|
||||
}
|
||||
|
||||
runLoop();
|
||||
},
|
||||
// stop requestAnimationFrame runLoop collecting computed values
|
||||
stopValueCollection: function(options) {
|
||||
options._collectValues = false;
|
||||
},
|
||||
|
||||
// generate test.step function asserting collected events match expected
|
||||
assertExpectedEventsFunc: function(data, elem, expected) {
|
||||
return function() {
|
||||
var _result = data[elem].events.sort().join(" ");
|
||||
var _expected = typeof expected === 'string' ? expected : expected.sort().join(" ");
|
||||
assert_equals(_result, _expected, "Expected TransitionEnd events triggered on ." + elem);
|
||||
};
|
||||
},
|
||||
// generate test.step function asserting collected values are neither initial nor target
|
||||
assertIntermediateValuesFunc: function(data, elem) {
|
||||
return function() {
|
||||
// the first value (index: 0) is always going to be the initial value
|
||||
// the last value is always going to be the target value
|
||||
var values = data[elem].values;
|
||||
if (data.flags.discrete) {
|
||||
// a discrete value will just switch from one state to another without having passed intermediate states.
|
||||
assert_equals(values[0], data[elem].from, "must be initial value while transitioning on ." + elem);
|
||||
assert_equals(values[1], data[elem].to, "must be target value after transitioning on ." + elem);
|
||||
assert_equals(values.length, 2, "discrete property only has 2 values ." + elem);
|
||||
} else {
|
||||
assert_not_equals(values[1], data[elem].from, "may not be initial value while transitioning on ." + elem);
|
||||
assert_not_equals(values[1], data[elem].to, "may not be target value while transitioning on ." + elem);
|
||||
}
|
||||
|
||||
// TODO: first value must be initial, last value must be target
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
//
|
||||
// Simple Helper Functions For Testing CSS
|
||||
//
|
||||
|
||||
(function(root) {
|
||||
'use strict';
|
||||
|
||||
// serialize styles object and dump to dom
|
||||
// appends <style id="dynamic-style"> to <head>
|
||||
// setStyle("#some-selector", {"some-style" : "value"})
|
||||
// setStyle({"#some-selector": {"some-style" : "value"}})
|
||||
root.setStyle = function(selector, styles) {
|
||||
var target = document.getElementById('dynamic-style');
|
||||
if (!target) {
|
||||
target = document.createElement('style');
|
||||
target.id = 'dynamic-style';
|
||||
target.type = "text/css";
|
||||
document.getElementsByTagName('head')[0].appendChild(target);
|
||||
}
|
||||
|
||||
var data = [];
|
||||
// single selector/styles
|
||||
if (typeof selector === 'string' && styles !== undefined) {
|
||||
data = [selector, '{', serializeStyles(styles), '}'];
|
||||
target.textContent = data.join("\n");
|
||||
return;
|
||||
}
|
||||
// map of selector/styles
|
||||
for (var key in selector) {
|
||||
if (Object.prototype.hasOwnProperty.call(selector, key)) {
|
||||
var _data = [key, '{', serializeStyles(selector[key]), '}'];
|
||||
data.push(_data.join('\n'));
|
||||
}
|
||||
}
|
||||
|
||||
target.textContent = data.join("\n");
|
||||
};
|
||||
|
||||
function serializeStyles(styles) {
|
||||
var data = [];
|
||||
for (var property in styles) {
|
||||
if (Object.prototype.hasOwnProperty.call(styles, property)) {
|
||||
var prefixedProperty = addVendorPrefix(property);
|
||||
data.push(prefixedProperty + ":" + styles[property] + ";");
|
||||
}
|
||||
}
|
||||
|
||||
return data.join('\n');
|
||||
}
|
||||
|
||||
|
||||
// shorthand for computed style
|
||||
root.computedStyle = function(element, property, pseudo) {
|
||||
var prefixedProperty = addVendorPrefix(property);
|
||||
return window
|
||||
.getComputedStyle(element, pseudo || null)
|
||||
.getPropertyValue(prefixedProperty);
|
||||
};
|
||||
|
||||
// flush rendering buffer
|
||||
root.reflow = function() {
|
||||
document.body.offsetWidth;
|
||||
};
|
||||
|
||||
// merge objects
|
||||
root.extend = function(target /*, ..rest */) {
|
||||
Array.prototype.slice.call(arguments, 1).forEach(function(obj) {
|
||||
Object.keys(obj).forEach(function(key) {
|
||||
target[key] = obj[key];
|
||||
});
|
||||
});
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
// dom fixture helper ("resetting dom test elements")
|
||||
var _domFixture;
|
||||
var _domFixtureSelector;
|
||||
root.domFixture = function(selector) {
|
||||
var fixture = document.querySelector(selector || _domFixtureSelector);
|
||||
if (!fixture) {
|
||||
throw new Error('fixture ' + (selector || _domFixtureSelector) + ' not found!');
|
||||
}
|
||||
if (!_domFixture && selector) {
|
||||
// save a copy
|
||||
_domFixture = fixture.cloneNode(true);
|
||||
_domFixtureSelector = selector;
|
||||
} else if (_domFixture) {
|
||||
// restore the copy
|
||||
var tmp = _domFixture.cloneNode(true);
|
||||
fixture.parentNode.replaceChild(tmp, fixture);
|
||||
} else {
|
||||
throw new Error('domFixture must be initialized first!');
|
||||
}
|
||||
};
|
||||
})(window);
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue