Add support for shadow DOM.

googlearchive · Sep 2, 2013 · a53fa20 · a53fa20
1 parent 8ac8223
commit a53fa20
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/layoutAnimationShim/src/layout-animation.js b/layoutAnimationShim/src/layout-animation.js
@@ -938,6 +938,13 @@ function cloneElementToSize(node, rect) {
   div.style.height = rect.height + 'px';
   div.innerHTML = node.innerHTML;
 
+  if (node.shadowRoot) {
+    var root = div.createShadowRoot();
+    for (var i = 0; i < node.shadowRoot.childNodes.length; i++) {
+      root.appendChild(node.shadowRoot.childNodes[i].cloneNode(true));
+    }
+  }
+
   var transitionChildren = node.querySelectorAll("[isTransitionable]");
   var transitionMirrors = div.querySelectorAll("[isTransitionable]");
   for (var i = 0; i < transitionChildren.length; i++) {

diff --git a/layoutAnimationShim/workbench/shadow-interaction.html b/layoutAnimationShim/workbench/shadow-interaction.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+<head>
+  <script src="../../../web-animations-js/web-animations.js"></script>
+    <script src="../../layoutAnimationShim/src/layout-animation.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: black;
+            text-align: center;
+        }
+        .item {
+            width: 400px;
+            margin: 0 auto;
+            background-color: white;
+            border-bottom: 1px solid dimgrey;
+            padding: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div id="container">
+        <div class="item">light</div>
+        <div class="item">light</div>
+        <div class="item">light</div>
+        <div class="item">light</div>
+        <div class="item">light</div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            registerLayoutKeyframes('default', [
+                {offset: 0, properties: {
+                    layoutWidth: 'from()', layoutHeight: 'from()', layoutTop: 'from()', layoutLeft: 'from()'
+                }},
+                {offset: 1, properties: {
+                    layoutWidth: 'to()', layoutHeight: 'to()', layoutTop: 'to()', layoutLeft: 'to()'
+                }}
+            ]);
+
+            var hangouts = document.querySelectorAll('.item');
+            var template = document.querySelector('#tmpl');
+            for (var i = 0, h; h = hangouts[i]; i++) {
+                var root = h.createShadowRoot();
+                root.appendChild(document.createTextNode('shadow'));
+            }
+            setLayoutTransition(hangouts, 'default', 1);
+            setLayoutEffect(hangouts, 'layout');
+
+            var container = document.querySelector('#container');
+            container.addEventListener('click', function(e) {
+                transitionThis(function() {
+                    container.insertBefore(e.target, container.children[0]);
+                }.bind(this));
+            })
+        });
+    </script>
+</body>
+</html>