Bug 1277433 - Part 3: Add tests for CSS Flexbox. r?birtles draft
authorDaisuke Akatsuka <daisuke@mozilla-japan.org>
Wed, 08 Jun 2016 16:54:49 +0900
changeset 376548 543a525d0e37913fbcdefc40cae6951c880872ab
parent 376539 8ad7ff4d84763b40c23edc85d8d4454d85f53464
child 376549 c986b614ff8c2b3e3de757a2f3fca2d607f61cfd
push id20609
push userbmo:daisuke@mozilla-japan.org
push dateWed, 08 Jun 2016 07:55:18 +0000
reviewersbirtles
bugs1277433
milestone49.0a1
Bug 1277433 - Part 3: Add tests for CSS Flexbox. r?birtles MozReview-Commit-ID: 6ozB69Mzy5Z
testing/web-platform/tests/web-animations/animation-model/animation-types/animation-types.html
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/animation-types.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/animation-types.html
@@ -16,25 +16,44 @@ var gCSSProperties = {
     discrete("flex-start", "flex-end")
   ],
   "align-items": [
     discrete("flex-start", "flex-end")
   ],
   "align-self": [
     discrete("flex-start", "flex-end")
   ],
+  "flex-basis": [
+    lengthPercentageCalc(),
+    discrete("auto", "10px")
+  ],
+  "flex-direction": [
+    discrete("row", "row-reverse")
+  ],
+  "flex-grow": [
+    integer()
+  ],
+  "flex-shrink": [
+    integer()
+  ],
+  "flex-wrap": [
+    discrete("nowrap", "wrap")
+  ],
   "justify-content": [
     discrete("baseline", "last-baseline")
   ],
   "justify-items": [
     discrete("baseline", "last-baseline")
   ],
   "justify-self": [
     discrete("baseline", "last-baseline")
   ],
+  "order": [
+    integer()
+  ],
 }
 
 Object.keys(gCSSProperties).forEach(function(property) {
   var testFunctions = gCSSProperties[property];
   testFunctions.forEach(function(testFunction) {
     testFunction(property);
   });
 });
@@ -46,45 +65,101 @@ function discrete(from, to) {
       var keyframe = {};
       keyframe[idlName] = [from, to];
       var div = createDiv(t);
       var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
       assertAnimation(idlName, animation, [{ time: 0,    expected: from },
                                            { time: 499,  expected: from },
                                            { time: 500,  expected: to },
                                            { time: 1000, expected: to }]);
-    }, "Test " + property + " with linear easing");
+    }, "Test " + property + " <discrete> with linear easing");
 
     test(function(t) {
       var keyframe = {};
       keyframe[idlName] = [from, to];
       var div = createDiv(t);
       var animation = div.animate(keyframe,
                                   { duration: 1000, fill: "both",
                                     easing: "cubic-bezier(0.68,0,1,0.01)" });
       assertAnimation(idlName, animation, [{ time: 0,    expected: from },
                                            { time: 940,  expected: from },
                                            { time: 960,  expected: to }]);
-    }, "Test " + property + " with effect easing");
+    }, "Test " + property + " <discrete> with effect easing");
 
     test(function(t) {
       var keyframe = {};
       keyframe[idlName] = [from, to]
       keyframe.easing = "cubic-bezier(0.68,0,1,0.01)";
       var div = createDiv(t);
       var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
       assertAnimation(idlName, animation, [{ time: 0,    expected: from },
                                            { time: 940,  expected: from },
                                            { time: 960,  expected: to }]);
-    }, "Test " + property + " with keyframe easing");
+    }, "Test " + property + " <discrete> with keyframe easing");
+  }
+}
+
+function length() {
+  return function(property) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var keyframe = {};
+      keyframe[idlName] = ["10px", "50px"];
+      var div = createDiv(t);
+      var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+      assertAnimation(idlName, animation, [{ time: 0,    expected: "10px" },
+                                           { time: 500,  expected: "30px" },
+                                           { time: 1000, expected: "50px" }]);
+    }, "Test " + property + " <length>");
+  }
+}
+
+function percentage() {
+  return function(property) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var keyframe = {};
+      keyframe[idlName] = ["10%", "50%"];
+      var div = createDiv(t);
+      var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+      assertAnimation(idlName, animation, [{ time: 0,    expected: "10%" },
+                                           { time: 500,  expected: "30%" },
+                                           { time: 1000, expected: "50%" }]);
+    }, "Test " + property + " <percentage>");
+  }
+}
+
+function integer() {
+  return function(property) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var keyframe = {};
+      keyframe[idlName] = [1, 5];
+      var div = createDiv(t);
+      var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+      assertAnimation(idlName, animation, [{ time: 0,    expected: "1" },
+                                           { time: 500,  expected: "3" },
+                                           { time: 1000, expected: "5" }]);
+    }, "Test " + property + " <integer>");
+  }
+}
+
+function lengthPercentageCalc() {
+  return function(property) {
+    length()(property);
+    percentage()(property);
   }
 }
 
 function assertAnimation(idlName, animation, testcases) {
   var target = animation.effect.target;
+  if (animation.effect.getKeyframes().length == 0) {
+    // Ignore if testing property is not supported.
+    return;
+  }
   testcases.forEach(function(testcase) {
     animation.currentTime = testcase.time;
     assert_equals(getComputedStyle(target)[idlName], testcase.expected,
                   "The value should be " + testcase.expected +
                   " at " + testcase.time + "ms");
   });
 }