Bug 1462829: Test {background,mask}-{size,position} clamping. r=hiro
authorEmilio Cobos Álvarez <emilio@crisal.io>
Sat, 19 May 2018 13:14:23 +0200
changeset 419160 bead6c2d07ca623c19edc88219d3a9315ebe6b51
parent 419159 f6141abe76bf0408172099006ae8e8d39a2454a9
child 419161 31044a37a94f66cbb384e2f141a9b7a183441de0
push id34029
push usershindli@mozilla.com
push dateMon, 21 May 2018 21:30:22 +0000
treeherdermozilla-central@51f2535c7974 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1462829
milestone62.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 1462829: Test {background,mask}-{size,position} clamping. r=hiro These properties no longer use calc() as an intermediate value as long as the types of the values match. But they don't resolve percentages to pixels in getComputedStyle as transform-origin and perspective-origin. MozReview-Commit-ID: 1CtN10ctGPF
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
@@ -82,39 +82,27 @@ var supported_properties = {
     "-moz-image-region": [ test_rect_transition ],
     "-moz-outline-radius-bottomleft": [ test_radius_transition ],
     "-moz-outline-radius-bottomright": [ test_radius_transition ],
     "-moz-outline-radius-topleft": [ test_radius_transition ],
     "-moz-outline-radius-topright": [ test_radius_transition ],
     "background-color": [ test_color_transition,
                           test_true_currentcolor_transition ],
     "background-position": [ test_background_position_transition,
-                             // FIXME: We don't currently test clamping,
-                             // since background-position uses calc() as
-                             // an intermediate form.
-                             /* test_length_percent_pair_unclamped */ ],
+                             test_length_percent_pair_unclamped ],
     "background-position-x": [ test_background_position_coord_transition,
                                test_length_transition,
                                test_percent_transition,
-                             // FIXME: We don't currently test clamping,
-                             // since background-position-x uses calc() as
-                             // an intermediate form.
-                             /* test_length_percent_pair_unclamped */ ],
+                               test_length_percent_pair_unclamped ],
     "background-position-y": [ test_background_position_coord_transition,
                                test_length_transition,
                                test_percent_transition,
-                             // FIXME: We don't currently test clamping,
-                             // since background-position-y uses calc() as
-                             // an intermediate form.
-                             /* test_length_percent_pair_unclamped */ ],
+                               test_length_percent_pair_unclamped ],
     "background-size": [ test_background_size_transition,
-                         // FIXME: We don't currently test clamping,
-                         // since background-size uses calc() as an
-                         // intermediate form.
-                         /* test_length_percent_pair_clamped */ ],
+                         test_length_percent_pair_clamped ],
     "border-bottom-color": [ test_color_transition,
                              test_true_currentcolor_transition ],
     "border-bottom-width": [ test_length_transition,
                              test_length_clamped ],
     "border-left-color": [ test_color_transition,
                            test_true_currentcolor_transition ],
     "border-left-width": [ test_length_transition,
                            test_length_clamped ],
@@ -190,39 +178,27 @@ var supported_properties = {
                      test_length_unclamped, test_percent_unclamped ],
     "margin-right": [ test_length_transition, test_percent_transition,
                       test_length_percent_calc_transition,
                       test_length_unclamped, test_percent_unclamped ],
     "margin-top": [ test_length_transition, test_percent_transition,
                     test_length_percent_calc_transition,
                     test_length_unclamped, test_percent_unclamped ],
     "mask-position": [ test_background_position_transition,
-                       // FIXME: We don't currently test clamping,
-                       // since mask-position uses calc() as
-                       // an intermediate form.
-                       /* test_length_percent_pair_unclamped */ ],
+                       test_length_percent_pair_unclamped ],
     "mask-position-x": [ test_background_position_coord_transition,
                          test_length_transition,
                          test_percent_transition,
-                         // FIXME: We don't currently test clamping,
-                         // since background-position-x uses calc() as
-                         // an intermediate form.
-                         /* test_length_percent_pair_unclamped */ ],
+                         test_length_percent_pair_unclamped ],
     "mask-position-y": [ test_background_position_coord_transition,
                          test_length_transition,
                          test_percent_transition,
-                         // FIXME: We don't currently test clamping,
-                         // since background-position-y uses calc() as
-                         // an intermediate form.
-                         /* test_length_percent_pair_unclamped */ ],
+                         test_length_percent_pair_unclamped ],
     "mask-size": [ test_background_size_transition,
-                   // FIXME: We don't currently test clamping,
-                   // since mask-size uses calc() as an
-                   // intermediate form.
-                   /* test_length_percent_pair_clamped */ ],
+                   test_length_percent_pair_clamped ],
     "max-height": [ test_length_transition, test_percent_transition,
                     test_length_clamped, test_percent_clamped ],
     "max-width": [ test_length_transition, test_percent_transition,
                    test_length_clamped, test_percent_clamped ],
     "min-height": [ test_length_transition, test_percent_transition,
                     test_length_clamped, test_percent_clamped ],
     "min-width": [ test_length_transition, test_percent_transition,
                    test_length_clamped, test_percent_clamped ],
@@ -2114,21 +2090,28 @@ function test_length_percent_pair_clampe
 function test_length_percent_pair_unclamped(prop) {
   test_length_percent_pair_clamped_or_unclamped(prop, false);
 }
 
 function test_length_percent_pair_clamped_or_unclamped(prop, is_clamped) {
   div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "0px 0%", "");
-  is(cs.getPropertyValue(prop), "0px 0px",
+  var is_zero = function(val) {
+    if (prop == "transform-origin" || prop == "perspective-origin") {
+      // These two properties resolve percentages to pixels.
+      return val == "0px 0px";
+    }
+    return val == "0px 0%";
+  }
+  ok(is_zero(cs.getPropertyValue(prop)),
      "length+percent-valued property " + prop + ": flush before clamping test");
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "30px 25%", "");
-  (is_clamped ? is : isnot)(cs.getPropertyValue(prop), "0px 0px",
+  is(is_zero(cs.getPropertyValue(prop)), is_clamped,
      "length+percent-valued property " + prop + ": clamping of negatives");
   div.style.setProperty("transition-timing-function", "linear", "");
 }
 
 function test_rect_transition(prop) {
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "rect(4px, 16px, 12px, 6px)", "");
   is(cs.getPropertyValue(prop), "rect(4px, 16px, 12px, 6px)",