brehaut/broken.html

## broken.html
<!DOCTYPE html>
<html>
 <head>
   <style>
     body > div {
       position: relative;
       height: 50px;
       margin-bottom: 10px;
     }

     body > div > div {
       position: absolute;
       top: 0;
       height: 100%;
       width: 50px;
       background: green;

       left: 0;
       -webkit-transition: left 200ms ease;
       transition: left 200ms ease;
     }
   </style>
 </head>
 <body>
   <script language="javascript">
     "use strict";

     var wait = 0;

     function new_divs () {
       var outer = document.createElement("div");
       var inner = document.createElement("div");
       outer.appendChild(inner);
       outer.appendChild(document.createTextNode("wait: " + wait + "ms. "));

       inner.addEventListener("transitionend", function () {
         outer.appendChild(document.createTextNode("transitionend"));
       }, true);

       // new node is added to the DOM
       document.body.appendChild(outer);

       setTimeout(function update() {
         // style property that is transitioned is modified
         inner.style.left = "300px";
         wait += 1;

         if (wait <= 25) setTimeout(new_divs, 1000);
       }, wait);
    }

     new_divs();
   </script>
 </body>
</html>

## working.html
<!DOCTYPE html>
<html>
 <head>
   <style>
     body > div {
       position: relative;
       height: 50px;
       margin-bottom: 10px;
     }

     body > div > div {
       position: absolute;
       top: 0;
       height: 100%;
       width: 50px;
       background: green;

       left: 0;
       -webkit-transition: left 200ms ease;
       transition: left 200ms ease;
     }
   </style>
 </head>
 <body>
   <script language="javascript">
     "use strict";

     var wait = 0;

     function new_divs () {
       var outer = document.createElement("div");
       var inner = document.createElement("div");
       outer.appendChild(inner);
       outer.appendChild(document.createTextNode("wait: " + wait + "ms. "));

       inner.addEventListener("transitionend", function () {
         outer.appendChild(document.createTextNode("transitionend"));
       }, true);

       // new node is added to the DOM
       document.body.appendChild(outer);
       void window.getComputedStyle(inner, null).getPropertyValue("left");

       function update() {
         // style property that is transitioned is modified
         inner.style.left = "300px";
         wait += 1;

         if (wait <= 25) setTimeout(new_divs, 1000);
       }
       update();
     }

     new_divs();
   </script>
 </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body > div {
	position: relative;
	height: 50px;
	margin-bottom: 10px;
	}

	body > div > div {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50px;
	background: green;

	left: 0;
	-webkit-transition: left 200ms ease;
	transition: left 200ms ease;
	}
	</style>
	</head>
	<body>
	<script language="javascript">
	"use strict";

	var wait = 0;

	function new_divs () {
	var outer = document.createElement("div");
	var inner = document.createElement("div");
	outer.appendChild(inner);
	outer.appendChild(document.createTextNode("wait: " + wait + "ms. "));

	inner.addEventListener("transitionend", function () {
	outer.appendChild(document.createTextNode("transitionend"));
	}, true);

	// new node is added to the DOM
	document.body.appendChild(outer);

	setTimeout(function update() {
	// style property that is transitioned is modified
	inner.style.left = "300px";
	wait += 1;

	if (wait <= 25) setTimeout(new_divs, 1000);
	}, wait);
	}

	new_divs();
	</script>
	</body>
	</html>