Bug 1132748 part 4: Extend CSS unprefixing mochitest to cover -webkit prefixed gradient expressions. (no review)
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 07 May 2015 09:04:42 -0700
changeset 242778 7e3204c8bfc6e1f1b7565e83d83b3738d3e5f050
parent 242777 7f5726cc7249006cfb4db3bc9f728d9f85307a51
child 242779 7a63a3b1bd61c5b008680524f9e829ff7905a380
push id59503
push userdholbert@mozilla.com
push dateThu, 07 May 2015 16:05:40 +0000
treeherdermozilla-inbound@7a63a3b1bd61 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1132748
milestone40.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1132748 part 4: Extend CSS unprefixing mochitest to cover -webkit prefixed gradient expressions. (no review)
layout/style/test/unprefixing_service_iframe.html
--- a/layout/style/test/unprefixing_service_iframe.html
+++ b/layout/style/test/unprefixing_service_iframe.html
@@ -157,16 +157,87 @@ const gTestcases = [
   // Same as previous test, except with "-webkit-transform" in the
   // middle of the value instead of at the beginning (still valid):
   { decl: "-webkit-transition: 1s -webkit-transform linear 2s",
     targetPropName: "transition",
     expectedDOMStyleVal:  "transform 1s linear 2s" },
   { decl: "-webkit-transition: 1s -webkit-transform linear 2s",
     targetPropName: "transition-property",
     expectedDOMStyleVal:  "transform" },
+
+  // -webkit-gradient(linear, ...) expressions:
+  { decl: "background-image: -webkit-gradient(linear,0 0,0 100%,from(rgb(1, 2, 3)),to(rgb(104, 105, 106)))",
+    targetPropName: "background-image",
+    expectedDOMStyleVal: "linear-gradient(180deg, rgb(1, 2, 3) 0%, rgb(104, 105, 106) 100%)"},
+  { decl: "background-image: -webkit-gradient(linear, left top, right bottom, from(rgb(1, 2, 3)), to(rgb(201, 202, 203)))",
+    targetPropName: "background-image",
+    expectedDOMStyleVal: "linear-gradient(135deg, rgb(1, 2, 3) 0%, rgb(201, 202, 203) 100%)"},
+
+  { decl: "background-image: -webkit-gradient(linear, left center, right center, from(rgb(1, 2, 3)), to(rgb(201, 202, 203)))",
+    targetPropName: "background-image",
+    expectedDOMStyleVal: "linear-gradient(to right, rgb(1, 2, 3) 0%, rgb(201, 202, 203) 100%)"},
+
+  { decl: "background-image: -webkit-gradient(linear, left center, right center, from(rgb(0, 0, 0)), color-stop(30%, rgb(255, 0, 0)), color-stop(60%, rgb(0, 255, 0)), to(rgb(0, 0, 255)))",
+    targetPropName: "background-image",
+    expectedDOMStyleVal: "linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(255, 0, 0) 30%, rgb(0, 255, 0) 60%, rgb(0, 0, 255) 100%)"},
+
+   // -webkit-gradient(radial, ...) expressions:
+   { decl: "background-image: -webkit-gradient(radial, center center, 0, center center, 50, from(black), to(white)",
+     targetPropName: "background-image",
+     expectedDOMStyleVal: "radial-gradient(50px at center center , black 0%, white 100%)",
+     // XXXdholbert Note: unnecessary space, see bug 1160063----^
+     expectedCompStyleVal: "radial-gradient(50px, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%)", },
+
+   { decl: "background-image: -webkit-gradient(radial, left bottom, 0, center center, 50, from(yellow), color-stop(20%, orange), color-stop(40%, red), color-stop(60%, green), color-stop(80%, blue), to(purple))",
+     targetPropName: "background-image",
+     expectedDOMStyleVal: "radial-gradient(50px at left bottom , yellow 0%, orange 20%, red 40%, green 60%, blue 80%, purple 100%)",
+     // XXXdholbert Note: unnecessary space, see bug 1160063--^
+     expectedCompStyleVal: "radial-gradient(50px at 0% 100%, rgb(255, 255, 0) 0%, rgb(255, 165, 0) 20%, rgb(255, 0, 0) 40%, rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%, rgb(128, 0, 128) 100%)" },
+
+   // -webkit-linear-gradient(...) expressions:
+   { decl: "background-image: -webkit-linear-gradient(top, blue, green)",
+     targetPropName: "background-image",
+     expectedDOMStyleVal: "linear-gradient(to bottom, blue, green)",
+     expectedCompStyleVal: "linear-gradient(rgb(0, 0, 255), rgb(0, 128, 0))", },
+
+   { decl: "background-image: -webkit-linear-gradient(left, blue, green)",
+     targetPropName: "background-image",
+     expectedDOMStyleVal: "linear-gradient(to right, blue, green)",
+     expectedCompStyleVal: "linear-gradient(to right, rgb(0, 0, 255), rgb(0, 128, 0))", },
+
+   { decl: "background-image: -webkit-linear-gradient(left bottom, blue, green)",
+     targetPropName: "background-image",
+     expectedDOMStyleVal: "linear-gradient(to right top, blue, green)",
+     expectedCompStyleVal: "linear-gradient(to top right, rgb(0, 0, 255), rgb(0, 128, 0))", },
+
+   { decl: "background-image: -webkit-linear-gradient(130deg, blue, green)",
+     targetPropName: "background-image",
+     expectedDOMStyleVal: "linear-gradient(320deg, blue, green)",
+     expectedCompStyleVal: "linear-gradient(320deg, rgb(0, 0, 255), rgb(0, 128, 0))", },
+
+   // -webkit-radial-gradient(...) expressions:
+   { decl: "background-image: -webkit-radial-gradient(#000, #fff)",
+     targetPropName: "background-image",
+     expectedDOMStyleVal: "radial-gradient(rgb(0, 0, 0), rgb(255, 255, 255))", },
+
+   /*
+   // XXXdholbert Side/corner specifiers don't work right now -- this is
+   // tracked in https://github.com/hallvors/css-fixme/issues/9 :
+   { decl: "background-image: -webkit-radial-gradient(bottom right, white, black)",
+     targetPropName: "background-image",
+     expectedDOMStyleVal: "radial-gradient(at bottom right, white, black)",
+     expectedCompStyleVal: "radial-gradient(at bottom right, rgb(255, 255, 255), rgb(0, 0, 0))", },
+   */
+
+   // Combination of unprefixed & prefixed gradient styles in a single 'background-image' expression
+   { decl: "background-image: -webkit-linear-gradient(black, white), radial-gradient(blue, purple), -webkit-gradient(linear,0 0,0 100%,from(red),to(orange))",
+     targetPropName: "background-image",
+     expectedDOMStyleVal: "linear-gradient(black, white), radial-gradient(blue, purple), linear-gradient(180deg, red 0%, orange 100%)",
+     expectedCompStyleVal: "linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)), radial-gradient(rgb(0, 0, 255), rgb(128, 0, 128)), linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(255, 165, 0) 100%)", },
+
 ];
 
 function getComputedStyleWrapper(elem, prop)
 {
   return window.getComputedStyle(elem, null).getPropertyValue(prop);
 }
 
 // Shims for "is()" and "ok()", which defer to parent window using postMessage: