Bug 1450390 part 1: Extend mochitest to cover transitions to/from flex-basis "content" keyword. r?emilio draft
authorDaniel Holbert <dholbert@cs.stanford.edu>
Tue, 03 Apr 2018 14:02:43 -0700
changeset 776873 ea1f6700a699a6432b23d5ccbe89ca4f3ae01fbe
parent 776872 917f8c2a17daf42b40be516605cd0b4ed893b1d1
child 776874 d71d0a7defc97fb333cfe1e2518fb2985b1861aa
push id105022
push userdholbert@mozilla.com
push dateTue, 03 Apr 2018 21:03:05 +0000
reviewersemilio
bugs1450390
milestone61.0a1
Bug 1450390 part 1: Extend mochitest to cover transitions to/from flex-basis "content" keyword. r?emilio MozReview-Commit-ID: 87rccEYzMDE
layout/style/test/test_transitions_per_property.html
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -143,17 +143,18 @@ var supported_properties = {
     "fill": [ test_color_transition,
               test_currentcolor_transition ],
     "fill-opacity" : [ test_float_zeroToOne_transition,
                        // opacity is clamped in computed style
                        // (not parsing/interpolation)
                        test_float_zeroToOne_clamped ],
     "filter" : [ test_filter_transition ],
     "flex-basis": [ test_length_transition, test_percent_transition,
-                    test_length_clamped, test_percent_clamped ],
+                    test_length_clamped, test_percent_clamped,
+                    test_flex_basis_content_transition ],
     "flex-grow": [ test_float_zeroToOne_transition,
                    test_float_aboveOne_transition ],
     "flex-shrink": [ test_float_zeroToOne_transition,
                      test_float_aboveOne_transition ],
     "flood-color": [ test_color_transition,
                      test_currentcolor_transition ],
     "flood-opacity" : [ test_float_zeroToOne_transition,
                         // opacity is clamped in computed style
@@ -1164,16 +1165,41 @@ function test_length_clamped_or_unclampe
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "100px", "");
   (is_clamped ? is : isnot)(cs.getPropertyValue(prop),
      numbers_are_pixels ? "0" : "0px",
      "length-valued property " + prop + ": clamping of negatives");
   div.style.setProperty("transition-timing-function", "linear", "");
 }
 
+// Test transition to/from the special 'flex-basis: content' keyword.
+function test_flex_basis_content_transition(prop) {
+  is(prop, "flex-basis", "this test function should only be called for 'flex-basis'");
+
+  // Test transition from length to 'content':
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "8px", "");
+  is(cs.getPropertyValue(prop), "8px",
+     "property " + prop + ": computed value before transition to 'content'");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "content", "");
+  is(cs.getPropertyValue(prop), "content",
+     "property " + prop + ": transition to 'content' (should jump directly)");
+
+  // Test transition from 'content' to length:
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "content", "");
+  is(cs.getPropertyValue(prop), "content",
+     "property " + prop + ": computed value before transition from 'content'");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "6px", "");
+  is(cs.getPropertyValue(prop), "6px",
+     "property " + prop + ": transition from 'content' (should jump directly)");
+}
+
 // Test using float values in the range [0, 1] (e.g. opacity)
 function test_float_zeroToOne_transition(prop) {
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "0.3", "");
   is(cs.getPropertyValue(prop), "0.3",
      "float-valued property " + prop + ": computed value before transition");
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "0.8", "");