Bug 1396538 - Part 2: Add test for background-repeat. r?pbro draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Mon, 04 Sep 2017 20:47:47 +0900
changeset 658597 8712cd54992cc9364540e6ee254cb00466080f4e
parent 658596 29cab1416a73a41898a05c50c5b1811e5ad47f62
child 729704 03c19deccd206069f20c8243f5a77688bcb727cb
push id77821
push userbmo:dakatsuka@mozilla.com
push dateMon, 04 Sep 2017 11:48:02 +0000
reviewerspbro
bugs1396538
milestone57.0a1
Bug 1396538 - Part 2: Add test for background-repeat. r?pbro MozReview-Commit-ID: Gv6Pe0k4cCP
devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
devtools/client/animationinspector/test/doc_multiple_property_types.html
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
@@ -21,16 +21,25 @@ const TEST_CASES = [
     "background-color": {
       expectedClass: "color",
       expectedValues: [
         { x: 0, y: 0 },
         { x: 0, y: 1, color: "rgb(255, 0, 0)" },
         { x: 1000, y: 1, color: "rgb(0, 255, 0)" }
       ]
     },
+    "background-repeat": {
+      expectedClass: "discrete",
+      expectedValues: [
+        { x: 0, y: 0 },
+        { x: 499.999, y: 0 },
+        { x: 500, y: 1 },
+        { x: 1000, y: 1 },
+      ]
+    },
     "font-size": {
       expectedClass: "length",
       expectedValues: [
         { x: 0, y: 0 },
         { x: 1000, y: 1 },
       ]
     },
     "margin-left": {
@@ -69,16 +78,25 @@ const TEST_CASES = [
     "background-color": {
       expectedClass: "color",
       expectedValues: [
         { x: 0, y: 0 },
         { x: 0, y: 1, color: "rgb(0, 255, 0)" },
         { x: 1000, y: 1, color: "rgb(255, 0, 0)" }
       ]
     },
+    "background-repeat": {
+      expectedClass: "discrete",
+      expectedValues: [
+        { x: 0, y: 0 },
+        { x: 499.999, y: 0 },
+        { x: 500, y: 1 },
+        { x: 1000, y: 1 },
+      ]
+    },
     "font-size": {
       expectedClass: "length",
       expectedValues: [
         { x: 0, y: 0 },
         { x: 0, y: 1 },
         { x: 1000, y: 0 },
       ]
     },
@@ -122,16 +140,27 @@ const TEST_CASES = [
       expectedClass: "color",
       expectedValues: [
         { x: 0, y: 0 },
         { x: 0, y: 1, color: "rgb(255, 0, 0)" },
         { x: 500, y: 1, color: "rgb(0, 0, 255)" },
         { x: 1000, y: 1, color: "rgb(0, 255, 0)" }
       ]
     },
+    "background-repeat": {
+      expectedClass: "discrete",
+      expectedValues: [
+        { x: 0, y: 0 },
+        { x: 249.999, y: 0 },
+        { x: 250, y: 1 },
+        { x: 749.999, y: 1 },
+        { x: 750, y: 0 },
+        { x: 1000, y: 0 },
+      ]
+    },
     "font-size": {
       expectedClass: "length",
       expectedValues: [
         { x: 0, y: 0 },
         { x: 500, y: 1 },
         { x: 1000, y: 0 },
       ]
     },
@@ -179,16 +208,25 @@ const TEST_CASES = [
         { x: 0, y: 0 },
         { x: 0, y: 1, color: "rgb(255, 0, 0)" },
         { x: 499.999, y: 1, color: "rgb(255, 0, 0)" },
         { x: 500, y: 1, color: "rgb(128, 128, 0)" },
         { x: 999.999, y: 1, color: "rgb(128, 128, 0)" },
         { x: 1000, y: 1, color: "rgb(0, 255, 0)" }
       ]
     },
+    "background-repeat": {
+      expectedClass: "discrete",
+      expectedValues: [
+        { x: 0, y: 0 },
+        { x: 499.999, y: 0 },
+        { x: 500, y: 1 },
+        { x: 1000, y: 1 },
+      ]
+    },
     "font-size": {
       expectedClass: "length",
       expectedValues: [
         { x: 0, y: 0 },
         { x: 500, y: 0 },
         { x: 500, y: 0.5 },
         { x: 1000, y: 0.5 },
         { x: 1000, y: 1 },
--- a/devtools/client/animationinspector/test/doc_multiple_property_types.html
+++ b/devtools/client/animationinspector/test/doc_multiple_property_types.html
@@ -22,71 +22,80 @@
 
   const timing = {
     duration: 1000,
     fill: "forwards"
   };
 
   document.querySelector("#target1").animate(
     [{ backgroundColor: "red",
+       backgroundRepeat: "space",
        fontSize: "10px",
        marginLeft: "0px",
        opacity: 0,
        textAlign: "right",
        transform: "translate(0px)" },
     { backgroundColor: "lime",
+      backgroundRepeat: "round",
       fontSize: "20px",
       marginLeft: "100px",
       opacity: 1,
       textAlign: "center",
       transform: "translate(100px)" }], timing).pause();
 
   document.querySelector("#target2").animate(
     [{ backgroundColor: "lime",
+       backgroundRepeat: "space",
        fontSize: "20px",
        marginLeft: "100px",
        opacity: 1,
        textAlign: "center",
        transform: "translate(100px)" },
     { backgroundColor: "red",
+      backgroundRepeat: "round",
       fontSize: "10px",
       marginLeft: "0px",
       opacity: 0,
       textAlign: "right",
       transform: "translate(0px)" }], timing).pause();
 
   document.querySelector("#target3").animate(
     [{ backgroundColor: "red",
+       backgroundRepeat: "space",
        fontSize: "10px",
        marginLeft: "0px",
        opacity: 0,
        textAlign: "right",
        transform: "translate(0px)" },
     { backgroundColor: "blue",
+      backgroundRepeat: "round",
       fontSize: "20px",
       marginLeft: "100px",
       opacity: 1,
       textAlign: "center",
       transform: "translate(100px)" },
     { backgroundColor: "lime",
+      backgroundRepeat: "space",
       fontSize: "10px",
       marginLeft: "0px",
       opacity: 0,
       textAlign: "right",
       transform: "translate(0px)" }], timing).pause();
 
   document.querySelector("#target4").animate(
     [{ backgroundColor: "red",
+       backgroundRepeat: "space",
        fontSize: "10px",
        marginLeft: "0px",
        opacity: 0,
        textAlign: "right",
        transform: "translate(0px)",
        easing: "steps(2)" },
     { backgroundColor: "lime",
+      backgroundRepeat: "round",
       fontSize: "20px",
       marginLeft: "100px",
       opacity: 1,
       textAlign: "center",
       transform: "translate(100px)" }], timing).pause();
 
   timing.easing = "steps(2)";
   document.querySelector("#target5").animate(