зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
572066ed23
Коммит
4c6a4c9705
|
@ -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
|
||||
|
|
Загрузка…
Ссылка в новой задаче