Bug 1467621 - P3: Add test for shadow-like color transitions on top of color transitions. r?xidorn draft
authorDan Glastonbury <dan.glastonbury@gmail.com>
Thu, 21 Jun 2018 17:40:12 +1000
changeset 809474 454fa24f3a805a3db32218ec2689e2078b10374d
parent 809473 fd29b363694cbe14838e605bf058d865412773fa
child 809475 da09edca8653279b3faff36a1a6dfee2ee74af04
push id113689
push userbmo:dglastonbury@mozilla.com
push dateFri, 22 Jun 2018 06:15:24 +0000
reviewersxidorn
bugs1467621
milestone62.0a1
Bug 1467621 - P3: Add test for shadow-like color transitions on top of color transitions. r?xidorn MozReview-Commit-ID: H6fxubFjNg6
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
@@ -1727,16 +1727,29 @@ function test_shadow_transition(prop) {
   is(cs.getPropertyValue(prop), defaultColor + "2px 2px 2px" + spreadStr,
      "shadow-valued property " + prop + ": computed value before transition");
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "6px 14px 10px", "");
   is(cs.getPropertyValue(prop), defaultColor + "3px 5px 4px" + spreadStr,
      "shadow-valued property " + prop + ": interpolation without color");
   check_distance(prop, "2px 2px 2px", "3px 5px 4px", "6px 14px 10px");
 
+  // Transition between values with currentcolor transitioning.
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty("color", "rgb(0, 255, 0)", "");
+  div.style.setProperty(prop, "2px 2px 2px", "");
+  is(cs.getPropertyValue(prop), "rgb(0, 255, 0) 2px 2px 2px" + spreadStr,
+     "shadow-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", "color, " + prop, "");
+  div.style.setProperty("color", "rgb(0, 0, 255)", "");
+  div.style.setProperty(prop, "6px 10px 14px red", "");
+  is(cs.getPropertyValue(prop), "rgb(64, 143, 48) 3px 4px 5px" + spreadStr,
+     "shadow-valued property " + prop + ": interpolation with interpolating" +
+     "currentcolor");
+
   div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "0px 0px 0px black", "");
   is(cs.getPropertyValue(prop), "rgb(0, 0, 0) 0px 0px 0px" + spreadStr,
      "shadow-valued property " + prop + ": flush before clamping test");
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "10px 10px 10px black", "");
   var vals = cs.getPropertyValue(prop).split(" ");