Support nested absolute / relative positioning.

googlearchive · Sep 2, 2013 · ab557bc · ab557bc
1 parent 9c4c34a
commit ab557bc
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 4 deletions.
diff --git a/layoutAnimationShim/src/layout-animation.js b/layoutAnimationShim/src/layout-animation.js
@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 var LOCATE_FOUC = false;
-
 /**
  * Returns a transform value (translation in X and Y plus scale in X and Y) that
  * converts a rectangle at current (left, top, width, height) with origin at 
@@ -80,6 +79,7 @@ function animationToPositionLayout(target, from, positions, duration) {
     return { offset: position.offset, value: str};
   });
 
+
   var mkPosList = function(property, list) {
     return list.map(function(input) {
       contentRect = boundingRectToContentRect(target, input);
@@ -613,7 +613,7 @@ function sensePosition(target) {
   var parent = target.parentElement;
   while (parent) {
     var style = getComputedStyle(parent);
-    if (style.position == 'absolute' || style.position == 'relative') {
+    if (style.position == 'absolute' || style.position == 'relative' || parent._layout) {
       break;
     }  
     parent = parent.parentElement;
@@ -725,6 +725,17 @@ function positionListFromKeyframes(keyframes, element) {
     }
   }
 
+  // Re-apply parent offsets so that these coordinates are absolute. 
+  if (element._transitionParent) {
+    var parentList = element._transitionParent._transitionPositionList;
+    for (var i = 0; i < parentList.length; i++) {
+      // TODO: deal with mismatched offsets
+      console.assert(parentList[i].offset == positions[i].offset);
+      positions[i].left += parentList[i].left;
+      positions[i].top += parentList[i].top;
+    }
+  }
+
   return positions;
 }
 
@@ -764,7 +775,10 @@ function transitionThis(action) {
 
       list[i]._transitionPositionList = [];
       for (var j = 0; j < positionList.length; j++) {
-        list[i]._transitionPositionList.push({left: positionList[j].left, top: positionList[j].top});
+        list[i]._transitionPositionList.push({
+            left: positionList[j].left,
+            top: positionList[j].top, 
+            offset: positionList[j].offset});
       }
 
       parGroup.append(generateAnimation(list[i], positionList)); 

diff --git a/layoutAnimationShim/tests/test-nested-effects-2.html b/layoutAnimationShim/tests/test-nested-effects-2.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<style>
+#outer {
+  position: absolute;
+  width: 200px;
+  height: 400px;
+  top: 100px;
+  left: 100px;
+  background-color: green;
+}
+
+#inner {
+  position: relative;
+  width: 100px;
+  height: 50px;
+  top: 100px;
+  left: 50px;
+  background-color: blue;
+}
+
+#outer.change {
+  width: 400px;
+  height: 200px;
+  top: 300px;
+  left: 300px;
+}
+
+#inner.change {
+  top: 0px;
+  height: 100px;
+  width: 50px;
+}
+</style>
+<div id='outer'>
+  Before inner
+  <div id='inner'>
+    Inside inner
+  </div>
+  After inner
+</div>
+<script src="../../../web-animations-js/web-animations.js"></script>
+<script src="../src/layout-animation.js"></script>
+<script src='test-helper.js'></script>
+<script>
+onload = function() {
+registerLayoutKeyframes("simple", [
+  {offset: 0, properties: { layoutWidth: "from()", layoutHeight: "from()",
+                            layoutTop: "from()", layoutLeft: "from()" }},
+  {offset: 1, properties: { layoutWidth: "to()", layoutHeight: "to()",
+                            layoutTop: "to()", layoutLeft: "to()" }}]);
+
+setLayoutTransition(outer, "simple", 1);
+setLayoutTransition(inner, "simple", 1);
+
+transitionThis(function() {
+  outer.classList.add('change');
+  inner.classList.add('change');
+});
+
+at(0.5, function() {
+  checkLaidOut(outer);
+  checkLayoutPosition(outer, 200, 200);
+  checkLayoutScale(outer, 1, 1);
+  checkLayoutSize(outer, 300, 300);
+  checkLayoutNoClip(outer);
+  checkLayoutOpacity(outer, 1);
+}, 'outer transition');
+
+at(0.5, function() {
+  checkLaidOut(inner);
+  checkLayoutPosition(inner, 250, 270);
+  checkLayoutScale(inner, 1, 1);
+  checkLayoutSize(inner, 75, 75);
+  checkLayoutNoClip(inner);
+  checkLayoutOpacity(inner, 1);
+}, 'inner transition');
+}
+</script>
diff --git a/layoutAnimationShim/tests/test-nested-effects.html b/layoutAnimationShim/tests/test-nested-effects.html
@@ -64,6 +64,7 @@
 <script src='../src/layout-animation.js'></script>
 <script src='test-helper.js'></script>
 <script>
+onload = function() {
 registerLayoutKeyframes('simple', [
   {offset: 0, properties: { layoutWidth: 'from()', layoutHeight: 'from()',
                             layoutTop: 'from()', layoutLeft: 'from()' }},
@@ -97,4 +98,5 @@
   checkLayoutNoClip(inner);
   checkLayoutOpacity(inner, 1);
 }, 'inner transition');
+}
 </script>
diff --git a/layoutAnimationShim/tests/test-simple-effects.html b/layoutAnimationShim/tests/test-simple-effects.html
@@ -48,7 +48,7 @@
 <script src='../src/layout-animation.js'></script>
 <script src='test-helper.js' nochecks></script>
 <script>
-
+onload = function() {
 registerLayoutKeyframes('simple', [
   {offset: 0, properties: { layoutWidth: 'from()', layoutHeight: 'from()',
                             layoutTop: 'from()', layoutLeft: 'from()' }},
@@ -126,4 +126,5 @@
   checkLayoutClip(clipFade, 150, 75);
   checkLayoutOpacity(clipFade, 0.5, 0.5);
 }, 'effect: clip fade');
+}
 </script>