Bug 826582 - Part 4: Make upstreamed calc() tests conform to the test template. r=dbaron

This commit is contained in:
Cameron McCormack 2013-01-16 14:17:44 +11:00
Родитель 394fd54e6c
Коммит 572066ed23
50 изменённых файлов: 538 добавлений и 96 удалений

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>Test for calc() on background-position</title>
<style>
<html>
<head>
<title>CSS Reference: Test for calc() on background-position</title>
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
p {
height: 50px; width: 200px;
@ -13,5 +18,9 @@ p {
#two { background-position: -18px -19px }
</style>
</head>
<body>
<p id="one"></p>
<p id="two"></p>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>Test for calc() on background-position</title>
<style>
<html>
<head>
<title>CSS Test: Test for calc() on background-position</title>
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
p {
height: 50px; width: 200px;
@ -13,5 +18,9 @@ p {
#two { background-position: calc(-12.5% + 3px) calc(-10px - 50%) }
</style>
</head>
<body>
<p id="one"></p>
<p id="two"></p>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>Test for calc() on background-size</title>
<style>
<html>
<head>
<title>CSS Reference: Test for calc() on background-size</title>
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
p {
height: 50px; width: 200px;
@ -13,5 +18,9 @@ p {
#two { background-image: none }
</style>
</head>
<body>
<p id="one"></p>
<p id="two"></p>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>Test for calc() on background-size</title>
<style>
<html>
<head>
<title>CSS Test: Test for calc() on background-size</title>
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
p {
height: 50px; width: 200px;
@ -13,5 +18,9 @@ p {
#two { background-size: calc(50px + 50%) calc(10px - 50%) }
</style>
</head>
<body>
<p id="one"></p>
<p id="two"></p>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>test for border-radius: calc()</title>
<style>
<html>
<head>
<title>CSS Reference: test for border-radius: calc()</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
p {
height: 256px;
@ -10,4 +15,8 @@ p {
}
</style>
</head>
<body>
<p></p>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>test for border-radius: calc()</title>
<style>
<html>
<head>
<title>CSS Test: test for border-radius: calc()</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
p {
/* We use powers of two here to avoid floating-point issues.
@ -20,4 +25,8 @@ p {
}
</style>
</head>
<body>
<p></p>
</body>
</html>

Просмотреть файл

@ -1,9 +1,16 @@
<!DOCTYPE HTML>
<title>Test for height:calc() or min-height:calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Reference: Test for height:calc() or min-height:calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -20,3 +27,5 @@ body > div { float: left; width: 1px; background: blue; }
<div style="height: 10px"></div>
<div style="height: 10px"></div>
<div style="height: 10px"></div>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>Test for height:calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: Test for height:calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
body { margin: 0 }
body > div { float: left; height: 100px; width: 1px; }
body > div > div { background: blue }
@ -8,6 +13,8 @@ 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>
@ -24,3 +31,5 @@ body > div > div > div > div { height: 10px }
<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>

Просмотреть файл

@ -1,12 +1,19 @@
<!DOCTYPE HTML>
<title>Test that height:calc() with no percentages has an effect on inner table elements</title>
<style>
<html>
<head>
<title>CSS Reference: Test that height:calc() with no percentages has an effect on inner table elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
tbody, tr, td {
height: 500px;
min-height: 700px;
max-height: 2px;
}
</style>
</head>
<body>
<table border>
<tbody>
<tr>
@ -19,3 +26,5 @@ tbody, tr, td {
</tr>
</tbody>
</table>
</body>
</html>

Просмотреть файл

@ -1,12 +1,19 @@
<!DOCTYPE HTML>
<title>Test that height:calc() with no percentages has an effect on inner table elements</title>
<style>
<html>
<head>
<title>CSS Test: Test that height:calc() with no percentages has an effect on inner table elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -19,3 +26,5 @@ tbody, tr, td {
</tr>
</tbody>
</table>
</body>
</html>

Просмотреть файл

@ -1,14 +1,23 @@
<!DOCTYPE HTML>
<title>Test of margin-*: calc()</title>
<style>
<html>
<head>
<title>CSS Reference: Test of margin-*: calc()</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>

Просмотреть файл

@ -1,14 +1,23 @@
<!DOCTYPE HTML>
<title>Test of margin-*: calc()</title>
<style>
<html>
<head>
<title>CSS Test: Test of margin-*: calc()</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>

Просмотреть файл

@ -1,9 +1,16 @@
<!DOCTYPE HTML>
<title>Test for max-height:calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Reference: Test for max-height:calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -20,3 +27,5 @@ body > div { float: left; width: 1px; background: blue; }
<div style="height: 300px"></div>
<div style="height: 300px"></div>
<div style="height: 300px"></div>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>Test for max-height:calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: Test for max-height:calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
body { margin: 0 }
body > div { float: left; height: 100px; width: 1px; }
body > div > div { background: blue }
@ -8,6 +13,8 @@ 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>
@ -24,3 +31,5 @@ span { display: block; height: 300px }
<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>

Просмотреть файл

@ -1,11 +1,18 @@
<!DOCTYPE HTML>
<title>max-width: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: max-width: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -14,3 +21,5 @@ p { background: green; color: white; margin: 1px 0; font-size: 10px; width: 1000
<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>

Просмотреть файл

@ -1,10 +1,17 @@
<!DOCTYPE HTML>
<title>intrinsic width of max-width: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Reference: intrinsic width of max-width: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -12,3 +19,5 @@ body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
<div style="width: 400px"></div>
<div style="width: 50px"></div>
<div style="width: 400px"></div>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>intrinsic width of max-width: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: intrinsic width of max-width: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
body { font-size: 10px }
body > div { float: left; clear: left;
@ -9,6 +14,8 @@ 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>
@ -16,3 +23,5 @@ body > div > div > div { width: 200px }
<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>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>Test for min-height:calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: Test for min-height:calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
body { margin: 0 }
body > div { float: left; height: 100px; width: 1px; }
body > div > div { background: blue }
@ -8,6 +13,8 @@ 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>
@ -24,3 +31,5 @@ body > div > div > div > div { height: 10px }
<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>

Просмотреть файл

@ -1,11 +1,18 @@
<!DOCTYPE HTML>
<title>min-width: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: min-width: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -14,3 +21,5 @@ p { background: green; color: white; margin: 1px 0; font-size: 10px; width: 0 }
<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>

Просмотреть файл

@ -1,10 +1,17 @@
<!DOCTYPE HTML>
<title>intrinsic width of min-width: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Reference: intrinsic width of min-width: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -12,3 +19,5 @@ body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
<div style="width: 1px"></div>
<div style="width: 50px"></div>
<div style="width: 1px"></div>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>intrinsic width of min-width: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: intrinsic width of min-width: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
body { font-size: 10px }
body > div { float: left; clear: left;
@ -9,6 +14,8 @@ 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>
@ -16,3 +23,5 @@ body > div > div > div { width: 200px }
<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>

Просмотреть файл

@ -1,11 +1,18 @@
<!DOCTYPE HTML>
<title>Test for bottom:calc() on absolutely positioned elements</title>
<style>
<html>
<head>
<title>CSS Test: Test for bottom:calc() on absolutely positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -22,3 +29,5 @@ div.space { height: 100px }
<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>

Просмотреть файл

@ -1,10 +1,17 @@
<!DOCTYPE HTML>
<title>Test for left:calc() on absolutely positioned elements</title>
<style>
<html>
<head>
<title>CSS Test: Test for left:calc() on absolutely positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -12,3 +19,5 @@ div[style] { background: blue; position: absolute; height: 3px; width: 100px }
<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>

Просмотреть файл

@ -1,10 +1,17 @@
<!DOCTYPE HTML>
<title>Test for right:calc() on absolutely positioned elements</title>
<style>
<html>
<head>
<title>CSS Test: Test for right:calc() on absolutely positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -12,3 +19,5 @@ div[style] { background: blue; position: absolute; height: 3px; width: 100px }
<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>

Просмотреть файл

@ -1,10 +1,17 @@
<!DOCTYPE HTML>
<title>Test for top:calc() on absolutely positioned elements</title>
<style>
<html>
<head>
<title>CSS Reference: Test for top:calc() on absolutely positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -21,3 +28,5 @@ div[style] { background: blue; position: relative; height: 10px; }
<div><div style="top: 45px"></div></div>
<div><div style="top: 40px"></div></div>
<div><div style="top: 30px"></div></div>
</body>
</html>

Просмотреть файл

@ -1,11 +1,18 @@
<!DOCTYPE HTML>
<title>Test for top:calc() on absolutely positioned elements</title>
<style>
<html>
<head>
<title>CSS Test: Test for top:calc() on absolutely positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -22,3 +29,5 @@ div.space { height: 100px }
<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>

Просмотреть файл

@ -1,10 +1,17 @@
<!DOCTYPE HTML>
<title>Test for bottom:calc() on relatively positioned elements</title>
<style>
<html>
<head>
<title>CSS Test: Test for bottom:calc() on relatively positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -21,3 +28,5 @@ div[style] { background: blue; position: relative; height: 10px; }
<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>

Просмотреть файл

@ -1,9 +1,16 @@
<!DOCTYPE HTML>
<title>Test for left:calc() on relatively positioned elements</title>
<style>
<html>
<head>
<title>CSS Reference: Test for left:calc() on relatively positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -11,3 +18,5 @@ div[style] { background: blue; position: relative; height: 3px; }
<div style="left: -45px"></div>
<div style="left: 40px"></div>
<div style="left: -30px"></div>
</body>
</html>

Просмотреть файл

@ -1,9 +1,16 @@
<!DOCTYPE HTML>
<title>Test for left:calc() on relatively positioned elements</title>
<style>
<html>
<head>
<title>CSS Test: Test for left:calc() on relatively positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -11,3 +18,5 @@ div[style] { background: blue; position: relative; height: 3px; }
<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>

Просмотреть файл

@ -1,9 +1,16 @@
<!DOCTYPE HTML>
<title>Test for right:calc() on relatively positioned elements</title>
<style>
<html>
<head>
<title>CSS Test: Test for right:calc() on relatively positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -11,3 +18,5 @@ div[style] { background: blue; position: relative; height: 3px; }
<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>

Просмотреть файл

@ -1,10 +1,17 @@
<!DOCTYPE HTML>
<title>Test for top:calc() on relatively positioned elements</title>
<style>
<html>
<head>
<title>CSS Reference: Test for top:calc() on relatively positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -21,3 +28,5 @@ div[style] { background: blue; position: relative; height: 10px; }
<div><div style="top: 0px"></div></div>
<div><div style="top: 0px"></div></div>
<div><div style="top: 0px"></div></div>
</body>
</html>

Просмотреть файл

@ -1,10 +1,17 @@
<!DOCTYPE HTML>
<title>Test for top:calc() on relatively positioned elements</title>
<style>
<html>
<head>
<title>CSS Test: Test for top:calc() on relatively positioned elements</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -21,3 +28,5 @@ div[style] { background: blue; position: relative; height: 10px; }
<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>

Просмотреть файл

@ -1,15 +1,24 @@
<!DOCTYPE HTML>
<title>Test of padding-*: calc()</title>
<style>
<html>
<head>
<title>CSS Reference: Test of padding-*: calc()</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>

Просмотреть файл

@ -1,15 +1,24 @@
<!DOCTYPE HTML>
<title>Test of padding-*: calc()</title>
<style>
<html>
<head>
<title>CSS Test: Test of padding-*: calc()</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>

Просмотреть файл

@ -1,11 +1,18 @@
<!DOCTYPE HTML>
<title>text-indent: calc()</title>
<style>
<html>
<head>
<title>CSS Reference: text-indent: calc()</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -14,3 +21,5 @@ p { font-size: 10px }
<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>

Просмотреть файл

@ -1,11 +1,18 @@
<!DOCTYPE HTML>
<title>text-indent: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: text-indent: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -14,3 +21,5 @@ p { font-size: 10px }
<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>

Просмотреть файл

@ -1,10 +1,17 @@
<!DOCTYPE HTML>
<title>intrinsic width of text-indent: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Reference: intrinsic width of text-indent: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -12,3 +19,5 @@ body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
<div style="width: 10px"></div>
<div style="width: 60px"></div>
<div style="width: 10px"></div>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>intrinsic width of text-indent: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: intrinsic width of text-indent: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
body { font-size: 10px }
div { float: left; clear: left;
@ -8,6 +13,8 @@ div { float: left; clear: left;
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>
@ -15,3 +22,5 @@ span { display: inline-block; width: 10px }
<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>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>Test for calc() on transform-origin</title>
<style>
<html>
<head>
<title>CSS Reference: Test for calc() on transform-origin</title>
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
body { margin: 100px }
@ -14,5 +19,9 @@ p {
#two { transform-origin: -22px -35px; }
</style>
</head>
<body>
<p id="one">hello</p>
<p id="two">hello</p>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>Test for calc() on transform-origin</title>
<style>
<html>
<head>
<title>CSS Test: Test for calc() on transform-origin</title>
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
body { margin: 100px }
@ -14,5 +19,9 @@ p {
#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>

Просмотреть файл

@ -1,5 +1,10 @@
<!DOCTYPE HTML>
<title>Test for vertical-align:calc()</title>
<html>
<head>
<title>CSS Reference: Test for vertical-align:calc()</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<div style="line-height: 100px; margin-top: 100px">
<span>x</span>
@ -10,3 +15,5 @@
<span style="vertical-align: 40px">x</span>
<span style="vertical-align: 30px">x</span>
</div>
</body>
</html>

Просмотреть файл

@ -1,5 +1,10 @@
<!DOCTYPE HTML>
<title>Test for vertical-align:calc()</title>
<html>
<head>
<title>CSS Test: Test for vertical-align:calc()</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<div style="line-height: 100px; margin-top: 100px">
<span>x</span>
@ -10,3 +15,5 @@
<span style="vertical-align: calc(40px + 10% - 20% / 2)">x</span>
<span style="vertical-align: calc(40px - 10%)">x</span>
</div>
</body>
</html>

Просмотреть файл

@ -1,11 +1,18 @@
<!DOCTYPE HTML>
<title>width: calc() and min-width: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Reference: width: calc() and min-width: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -14,3 +21,5 @@ p { background: green; color: white; margin: 1px 0; font-size: 10px }
<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>

Просмотреть файл

@ -1,11 +1,18 @@
<!DOCTYPE HTML>
<title>width: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: width: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -14,3 +21,5 @@ p { background: green; color: white; margin: 1px 0; font-size: 10px }
<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>

Просмотреть файл

@ -1,10 +1,17 @@
<!DOCTYPE HTML>
<title>intrinsic width of width: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Reference: intrinsic width of width: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>
@ -12,3 +19,5 @@ body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
<div style="width: 200px"></div>
<div style="width: 50px"></div>
<div style="width: 200px"></div>
</body>
</html>

Просмотреть файл

@ -1,6 +1,11 @@
<!DOCTYPE HTML>
<title>intrinsic width of width: calc() on blocks</title>
<style>
<html>
<head>
<title>CSS Test: intrinsic width of width: calc() on blocks</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
body { font-size: 10px }
body > div { float: left; clear: left;
@ -8,6 +13,8 @@ body > div { float: left; clear: left;
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>
@ -15,3 +22,5 @@ body > div > div > div { width: 200px }
<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>

Просмотреть файл

@ -1,5 +1,10 @@
<!DOCTYPE HTML>
<title>width: calc() on table-layout: auto tables</title>
<html>
<head>
<title>CSS Reference: width: calc() on table-layout: auto tables</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<table border>
<tr>
<td style="width: 500px">x</td>
@ -15,3 +20,5 @@
<td>x</td>
<td style="width: 100px">y</td>
</table>
</body>
</html>

Просмотреть файл

@ -1,5 +1,10 @@
<!DOCTYPE HTML>
<title>width: calc() on table-layout: auto tables</title>
<html>
<head>
<title>CSS Test: width: calc() on table-layout: auto tables</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<table border>
<tr>
<td style="width: calc(500px)">x</td>
@ -15,3 +20,5 @@
<td style="width: calc(2 * 10% + 0.5 * 500px)">x</td>
<td style="width: 100px">y</td>
</table>
</body>
</html>

Просмотреть файл

@ -1,8 +1,15 @@
<!DOCTYPE HTML>
<title>width: calc() on table-layout: auto tables</title>
<style>
<html>
<head>
<title>CSS Reference: width: calc() on table-layout: auto tables</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
table { table-layout: fixed; width: 500px; border-spacing: 0 }
</style>
</head>
<body>
<table border>
<tr>
<td style="width: 500px">x</td>
@ -18,3 +25,5 @@ table { table-layout: fixed; width: 500px; border-spacing: 0 }
<td>x</td>
<td style="width: 100px">y</td>
</table>
</body>
</html>

Просмотреть файл

@ -1,8 +1,15 @@
<!DOCTYPE HTML>
<title>width: calc() on table-layout: auto tables</title>
<style>
<html>
<head>
<title>CSS Test: width: calc() on table-layout: auto tables</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<style type="text/css">
table { table-layout: fixed; width: 500px; border-spacing: 0 }
</style>
</head>
<body>
<table border>
<tr>
<td style="width: calc(500px)">x</td>
@ -18,3 +25,5 @@ table { table-layout: fixed; width: 500px; border-spacing: 0 }
<td style="width: calc(2 * 10% + 0.5 * 500px)">x</td>
<td style="width: 100px">y</td>
</table>
</body>
</html>