Bug 759568 - Part 5. reftest for background-clip:text; r=dbaron

MozReview-Commit-ID: DXl7mHnTxbL
This commit is contained in:
CJKu 2016-04-12 21:58:23 +08:00
parent 02dad989ae
commit 77b503194c
6 changed files with 122 additions and 0 deletions

View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>background-clip: text reference</title>
</head>
<body style="margin: 0px;">
<div style="width: 500px; height: 300px;">
<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="100%" style="stop-color:green;stop-opacity:1" />
</linearGradient>
</defs>
<text x="0" y="200" font-size="100px" fill="url(#grad1)" font-family="serif">TEXT clip</text>
</svg>
</div>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!doctype HTML>
<html>
<head>
<title>background-clip: text</title>
<style>
div.out {
width: 500px;
height: 300px;
margin: 0px;
background-image: linear-gradient(green, green);
background-clip: text;
color: transparent;
font-size: 100px;
font-family: serif;
}
</style>
</head>
<body style="margin: 0px;">
<div class="out">
TEXT clip
<div style="display:inline-block; width:0px; height:200px;"/>
</div>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!doctype HTML>
<html>
<head>
<title>background-clip: text</title>
<style>
div.out {
width: 500px;
height: 300px;
margin: 0px;
background-image: linear-gradient(green, green);
background-clip: text;
color: transparent;
font-size: 100px;
font-family: serif;
}
</style>
</head>
<body style="margin: 0px;">
<div class="out">
<p style="display:inline-block;">TEXT clip</p>
<div style="display:inline-block; width:0px; height:200px;"/>
</div>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!doctype HTML>
<html>
<head>
<title>background-clip: text</title>
<style>
div.out {
width: 500px;
height: 300px;
margin: 0px;
background-image: linear-gradient(green, green);
background-clip: text;
color: transparent;
font-size: 100px;
font-family: serif;
}
</style>
</head>
<body style="margin: 0px;">
<div class="out">
<div style="display:inline-block;">
<p style="display:inline-block;">TEXT clip</p>
</div>
<div style="display:inline-block; width:0px; height:200px;"/>
</div>
</body>
</html>

View File

@ -0,0 +1,23 @@
<!doctype HTML>
<html>
<head>
<title>background-clip: text</title>
<style>
div.out {
width: 500px;
height: 300px;
margin: 0px;
background: linear-gradient(green, green) padding-box text;
color: transparent;
font-size: 100px;
font-family: serif;
}
</style>
</head>
<body style="margin: 0px;">
<div class="out">
TEXT clip
<div style="display:inline-block; width:0px; height:200px;"/>
</div>
</body>
</html>

View File

@ -165,3 +165,9 @@ fuzzy-if(skiaContent,1,8) == background-multiple-with-border-radius.html backgro
== background-repeat-large-area.html background-repeat-large-area-ref.html
fuzzy(30,474) fuzzy-if(skiaContent,31,474) == background-tiling-zoom-1.html background-tiling-zoom-1-ref.html
pref(layout.css.background-clip-text.enabled,true) == background-clip-text-1a.html background-clip-text-1-ref.html
pref(layout.css.background-clip-text.enabled,true) == background-clip-text-1b.html background-clip-text-1-ref.html
pref(layout.css.background-clip-text.enabled,true) == background-clip-text-1c.html background-clip-text-1-ref.html
pref(layout.css.background-clip-text.enabled,true) == background-clip-text-1d.html background-clip-text-1-ref.html
pref(layout.css.background-clip-text.enabled,false) != background-clip-text-1a.html background-clip-text-1-ref.html