Bug 826582 - Part 5: Upstream calc-in-gradient tests. r=dbaron

--HG--
rename : layout/reftests/css-calc/background-image-gradient-1-ref.html => layout/reftests/w3c-css/submitted/values3/calc-background-image-gradient-1-ref.html
rename : layout/reftests/css-calc/background-image-gradient-1.html => layout/reftests/w3c-css/submitted/values3/calc-background-image-gradient-1.html
rename : layout/reftests/css-calc/background-linear-gradient-1-ref.html => layout/reftests/w3c-css/submitted/values3/calc-background-linear-gradient-1-ref.html
rename : layout/reftests/css-calc/background-linear-gradient-1.html => layout/reftests/w3c-css/submitted/values3/calc-background-linear-gradient-1.html
This commit is contained in:
Cameron McCormack 2013-01-16 14:18:13 +11:00
Родитель 572066ed23
Коммит 4c6a4c9705
8 изменённых файлов: 125 добавлений и 64 удалений

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

@ -1,31 +0,0 @@
<!DOCTYPE html>
<title>Test Bug 594935 - support calc() on gradient stop positions</title>
<style>
div {
width:100px;
height:100px;
background:red;
margin:5px 0 0 5px;
float:left;
}
div#one {
background: -moz-linear-gradient(lime 0px, lime 90px, blue 90px, blue 100%);
}
div#two {
background: -moz-linear-gradient(blue 0px ,green 30px ,red 40px ,white 60px , lime 80px);
}
div#three {
background: -moz-linear-gradient(blue 0px ,purple 20px ,red 40px ,blue 60px , lime 80px);
}
div#four {
background: -moz-linear-gradient(blue 0px ,green 30px ,red 40px ,blue 60px , yellow 80px);
}
div#five {
background: -moz-linear-gradient(red 0px ,green 30px);
}
</style>
<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>

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

@ -1,32 +0,0 @@
<!DOCTYPE html>
<title>Test Bug 594935 - support calc() on gradient stop positions</title>
<style>
div {
width:100px;
height:100px;
background:red;
margin:5px 0 0 5px;
float:left;
}
div#one {
background: -moz-linear-gradient(lime 0px, lime calc(100% - 10px), blue calc(100% - 10px), blue 100%);
}
div#two {
background: -moz-linear-gradient(blue calc(100% - 100px) ,green calc(10% + 20px) ,red 40px ,white calc(100% - 40px) , lime 80px);
}
div#three {
background: -moz-linear-gradient(blue calc(0px) ,purple calc(20%) ,red calc(10px + 10px + 20px) ,blue calc(30% + 30px) , lime calc(180% - 100px));
}
div#four {
background: -moz-linear-gradient(blue calc(0% + 0px) ,green calc(10% + 20px) ,red 40px ,blue calc(200% / 2 - 40px) , yellow 80px);
}
div#five {
background: -moz-linear-gradient(red calc(100% - 100px) ,green calc(10% + 20px));
}
</style>
<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>

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

@ -1,2 +1 @@
== background-linear-gradient-1.html background-linear-gradient-1-ref.html
random-if(bug685516) == background-image-gradient-1.html background-image-gradient-1-ref.html

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

@ -0,0 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<title>CSS Reference: Test for calc() on background-image gradients</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: 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,22 @@
<!DOCTYPE HTML>
<html>
<head>
<title>CSS Test: Test for calc() on background-image gradients</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: 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,39 @@
<!DOCTYPE html>
<head>
<title>CSS Reference: Support calc() on gradient stop positions</title>
<link rel="author" title="Yu-Sian (Thomasy) Liu" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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,40 @@
<!DOCTYPE html>
<head>
<title>CSS Test: Support calc() on gradient stop positions</title>
<link rel="author" title="Yu-Sian (Thomasy) Liu" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<meta name="flags" content="">
<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>

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

@ -1,3 +1,5 @@
== calc-background-linear-gradient-1.html calc-background-linear-gradient-1-ref.html
random-if(bug685516) == calc-background-image-gradient-1.html calc-background-image-gradient-1-ref.html
random-if(bug685516) == calc-background-position-1.html calc-background-position-1-ref.html
random-if(bug685516) == calc-background-size-1.html calc-background-size-1-ref.html
== calc-border-radius-1.html calc-border-radius-1-ref.html