surma/testsuite.html Secret

## testsuite.html
<!doctype html>
<meta charset="utf-8">
<style>
html, body {
  margin: 0;
  padding: 0;
}
.element {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
#demo {
  width: 100vw;
  height: 200px;
}
p {
  margin-bottom: 80px;
}
</style>
<p>
  This website tests if there is a <code>transitionend</code> event when transitioning between property values that <em>mean</em> the same thing. The code can be found <a href="https://gist.github.com/surma/d01524912f3157dce9293108b60c8e96">here</a>.
</p>
<div id="demo">
  <div class="element">Test</div>
</div>
<table id="results">
</table>
<script>
var demos = [
  {
    name: "transform",
    values: "(translateX(0) → translate(0))",
    styles: `
      .element.prepare {
        transform: translateX(0);
      }
      .element.transition {
        transition: transform 0.1s;
      }
      .element.modify {
        transform: translate(0);
      }
    `
  },
  {
    name: "color",
    values: "(rgba(255, 0, 0, 1) → hsla(0, 100%, 50%, 1))",
    styles: `
      .element.prepare {
        color: rgba(255, 0, 0, 1);
      }
      .element.transition {
        transition: color 0.1s;
      }
      .element.modify {
        color: hsla(0, 100%, 50%, 1);
      }
    `
  },
  {
    name: "width",
    values: "(50vw → 50%)",
    styles: `
      .element.prepare {
        width: 50vw;
      }
      .element.transition {
        transition: width 0.1s;
      }
      .element.modify {
        width: 50%;
      }
    `
  },
  {
    name: "font-size",
    "values": "(19px → 1em)",
    styles: `
      :root {
        font-size: 19px;
      }
      .element.prepare {
        font-size: 19px;
      }
      .element.transition {
        transition: font-size 0.1s;
      }
      .element.modify {
        font-size: 1em;
      }
    `
  },
  {
    name: "position",
    values: "(static → relative)",
    styles: `
      .element.prepare {
        position: static;
      }
      .element.transition {
        transition: position 0.1s;
      }
      .element.modify {
        position: relative;
      }
    `
  },
  {
    name: "transform-origin",
    values: "(center center → 50% 50%)",
    styles: `
      .element.prepare {
        transform: rotate(20deg);
        transform-origin: center center;
      }
      .element.transition {
        transition: transform-origin 0.1s;
      }
      .element.modify {
        transform-origin: 50% 50%;
      }
    `
  }

]

var reportTemplate = data => `
  <tr>
    <td>${data.name}</td>
    <td>${data.values}</td>
    <td>${data.result}</td>
  </tr>
`;

function rafPromise() {
  return new Promise(function(resolve) {
    requestAnimationFrame(resolve);
  });
}

function doubleRafPromise() {
  return rafPromise()
    .then(function() {return rafPromise();});
}

function cleanupGeneratedStyles() {
  Array.from(document.head.querySelectorAll('.generated')).forEach(elem => elem.remove());
  return doubleRafPromise();
}

function insertStyles(styles) {
  var node = document.createElement('style');
  node.classList.add('generated');
  node.innerHTML = styles;
  document.head.appendChild(node);
  return doubleRafPromise();
}

function hookupListener(element) {
  return new Promise(function(resolve) {
    var timeoutId;
    var listener = function () {
      clearTimeout(timeoutId);
      element.removeEventListener('transitionend', listener);
      resolve('fired');
    };
    element.addEventListener('transitionend', listener);
    timeoutId = setTimeout(function () {
      element.removeEventListener('transitionend', listener);
      resolve('not fired');
    }, 300);
  });
}

var demoElement = document.querySelector('#demo > .element');
var resultTable = document.querySelector('#results');

demos.reduce(function(chain, test) {
  return chain
    .then(function () {return cleanupGeneratedStyles()})
    .then(function () {return demoElement.classList.remove('prepare', 'transition', 'modify')})
    .then(function () {return insertStyles(test.styles)})
    .then(function () {return demoElement.classList.add('prepare')})
    .then(function () {return doubleRafPromise()})
    .then(function () {return demoElement.classList.add('transition')})
    .then(function () {return doubleRafPromise()})
    .then(function () {
      p = hookupListener(demoElement);
      return doubleRafPromise()
        .then(function () {return demoElement.classList.add('modify');})
        .then(function () {return p;});
    })
    .then(function (result) {
      resultTable.innerHTML += reportTemplate(Object.assign(test, {result}));
    })
    .then(function () {return doubleRafPromise();})
  },
  Promise.resolve());
</script>
	<!doctype html>
	<meta charset="utf-8">
	<style>
	html, body {
	margin: 0;
	padding: 0;
	}
	.element {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	}
	#demo {
	width: 100vw;
	height: 200px;
	}
	p {
	margin-bottom: 80px;
	}
	</style>
	<p>
	This website tests if there is a <code>transitionend</code> event when transitioning between property values that <em>mean</em> the same thing. The code can be found <a href="https://gist.github.com/surma/d01524912f3157dce9293108b60c8e96">here</a>.
	</p>
	<div id="demo">
	<div class="element">Test</div>
	</div>
	<table id="results">
	</table>
	<script>
	var demos = [
	{
	name: "transform",
	values: "(translateX(0) → translate(0))",
	styles: `
	.element.prepare {
	transform: translateX(0);
	}
	.element.transition {
	transition: transform 0.1s;
	}
	.element.modify {
	transform: translate(0);
	}
	`
	},
	{
	name: "color",
	values: "(rgba(255, 0, 0, 1) → hsla(0, 100%, 50%, 1))",
	styles: `
	.element.prepare {
	color: rgba(255, 0, 0, 1);
	}
	.element.transition {
	transition: color 0.1s;
	}
	.element.modify {
	color: hsla(0, 100%, 50%, 1);
	}
	`
	},
	{
	name: "width",
	values: "(50vw → 50%)",
	styles: `
	.element.prepare {
	width: 50vw;
	}
	.element.transition {
	transition: width 0.1s;
	}
	.element.modify {
	width: 50%;
	}
	`
	},
	{
	name: "font-size",
	"values": "(19px → 1em)",
	styles: `
	:root {
	font-size: 19px;
	}
	.element.prepare {
	font-size: 19px;
	}
	.element.transition {
	transition: font-size 0.1s;
	}
	.element.modify {
	font-size: 1em;
	}
	`
	},
	{
	name: "position",
	values: "(static → relative)",
	styles: `
	.element.prepare {
	position: static;
	}
	.element.transition {
	transition: position 0.1s;
	}
	.element.modify {
	position: relative;
	}
	`
	},
	{
	name: "transform-origin",
	values: "(center center → 50% 50%)",
	styles: `
	.element.prepare {
	transform: rotate(20deg);
	transform-origin: center center;
	}
	.element.transition {
	transition: transform-origin 0.1s;
	}
	.element.modify {
	transform-origin: 50% 50%;
	}
	`
	}

	]

	var reportTemplate = data => `
	<tr>
	<td>${data.name}</td>
	<td>${data.values}</td>
	<td>${data.result}</td>
	</tr>
	`;

	function rafPromise() {
	return new Promise(function(resolve) {
	requestAnimationFrame(resolve);
	});
	}

	function doubleRafPromise() {
	return rafPromise()
	.then(function() {return rafPromise();});
	}

	function cleanupGeneratedStyles() {
	Array.from(document.head.querySelectorAll('.generated')).forEach(elem => elem.remove());
	return doubleRafPromise();
	}

	function insertStyles(styles) {
	var node = document.createElement('style');
	node.classList.add('generated');
	node.innerHTML = styles;
	document.head.appendChild(node);
	return doubleRafPromise();
	}

	function hookupListener(element) {
	return new Promise(function(resolve) {
	var timeoutId;
	var listener = function () {
	clearTimeout(timeoutId);
	element.removeEventListener('transitionend', listener);
	resolve('fired');
	};
	element.addEventListener('transitionend', listener);
	timeoutId = setTimeout(function () {
	element.removeEventListener('transitionend', listener);
	resolve('not fired');
	}, 300);
	});
	}

	var demoElement = document.querySelector('#demo > .element');
	var resultTable = document.querySelector('#results');

	demos.reduce(function(chain, test) {
	return chain
	.then(function () {return cleanupGeneratedStyles()})
	.then(function () {return demoElement.classList.remove('prepare', 'transition', 'modify')})
	.then(function () {return insertStyles(test.styles)})
	.then(function () {return demoElement.classList.add('prepare')})
	.then(function () {return doubleRafPromise()})
	.then(function () {return demoElement.classList.add('transition')})
	.then(function () {return doubleRafPromise()})
	.then(function () {
	p = hookupListener(demoElement);
	return doubleRafPromise()
	.then(function () {return demoElement.classList.add('modify');})
	.then(function () {return p;});
	})
	.then(function (result) {
	resultTable.innerHTML += reportTemplate(Object.assign(test, {result}));
	})
	.then(function () {return doubleRafPromise();})
	},
	Promise.resolve());
	</script>