Bug 759568 - Part 5. reftest for background-clip:text; r=dbaron
authorCJKu <cku@mozilla.com>
Thu, 14 Apr 2016 16:28:07 +0800
changeset 293278 a1d45ed2cb6388405977e6b3c5ad09eaab78f7c4
parent 293277 3b022b5f27475daff60dc0e6b171a93fa359bd40
child 293279 7baeeb594c97bf30c780108f7ce6e0bb2c458cb3
push id18749
push usercbook@mozilla.com
push dateFri, 15 Apr 2016 12:01:19 +0000
treeherderfx-team@8f7045b63b07 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs759568
milestone48.0a1
Bug 759568 - Part 5. reftest for background-clip:text; r=dbaron MozReview-Commit-ID: DXl7mHnTxbL
layout/reftests/backgrounds/background-clip-text-1-ref.html
layout/reftests/backgrounds/background-clip-text-1a.html
layout/reftests/backgrounds/background-clip-text-1b.html
layout/reftests/backgrounds/background-clip-text-1c.html
layout/reftests/backgrounds/background-clip-text-1d.html
layout/reftests/backgrounds/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1-ref.html
@@ -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>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1a.html
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1b.html
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1c.html
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1d.html
@@ -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>
--- a/layout/reftests/backgrounds/reftest.list
+++ b/layout/reftests/backgrounds/reftest.list
@@ -160,8 +160,14 @@ fuzzy(50,500) == attachment-local-clippi
 fuzzy(16,69) fuzzy-if(skiaContent,64,1300) == attachment-local-clipping-image-4.html attachment-local-clipping-image-4-ref.html
 fuzzy(16,69) fuzzy-if(skiaContent,64,1300) == attachment-local-clipping-image-5.html attachment-local-clipping-image-4-ref.html
 fuzzy(80,500) == attachment-local-clipping-image-6.html attachment-local-clipping-image-6-ref.html
 
 fuzzy-if(skiaContent,1,8) == background-multiple-with-border-radius.html background-multiple-with-border-radius-ref.html
 == 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) fuzzy-if(winWidget,1,44) == background-clip-text-1a.html background-clip-text-1-ref.html
+pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,1,44) == background-clip-text-1b.html background-clip-text-1-ref.html
+pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,1,44) == background-clip-text-1c.html background-clip-text-1-ref.html
+pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,1,44) == 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