Add transitions for CSS calc().

Closes #7284

tests/ref/basic.list

@@ -378,6 +378,7 @@ device-pixel-ratio=2 != pixel_snapping_border_a.html pixel_snapping_border_ref.h
 == transform_simple_a.html transform_simple_ref.html
 == transform_skew_a.html transform_skew_ref.html
 == transform_stacking_context_a.html transform_stacking_context_ref.html
+== transition_calc.html transition_calc_ref.html
 == upper_id_attr.html upper_id_attr_ref.html
 flaky_cpu,prefs:"layout.writing-mode.enabled" == vertical-lr-blocks.html vertical-lr-blocks_ref.html
 == vertical_align_bottom_a.html vertical_align_bottom_ref.html

tests/ref/transition_calc.html

@@ -0,0 +1,25 @@
+<style>
+.outer {
+    width: 100px;
+    height: 100px;
+}
+.inner {
+    transition: height 0s;
+    height: calc(100px + 5%);
+    width: 100px;
+    background: red;
+    display: inline-block;
+}
+.inner.active {
+    height: 200px;
+}
+</style>
+<div class=outer>
+<div class=inner id=inner></div>
+</div>
+<script>
+requestAnimationFrame(function() {
+    document.getElementById('inner').className = 'inner active';
+    requestAnimationFrame(function() {});
+});
+</script>

tests/ref/transition_calc_ref.html

@@ -0,0 +1,17 @@
+<style>
+.outer {
+    width: 100px;
+    height: 100px;
+}
+.inner {
+    width: 100px;
+    height: 200px;
+    background: red;
+    display: inline-block;
+}
+.inner.active {
+}
+</style>
+<div class=outer>
+<div class=inner id=inner></div>
+</div>