tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

vh-update-and-transition-in-subframe-iframe.html (2069B)

      1 <!DOCTYPE html>
      2 <html>
      3 <!-- Submitted from TestTWF Paris -->
      4 <head>
      5 <style type="text/css">
      6 	* {
      7 		margin: 0;
      8 		padding: 0;
      9 	}
     10 	p {
     11 		clear: both;
     12 		margin: 10px 0;
     13 	}
     14 
     15 	/* The first test box has its vertical dimension is set to
     16 	   some `vh` units. */
     17 	#testBoxWithVhOnly {
     18 		background: #F00;
     19 		width: 60px; height: 20vh;
     20 		float: left;
     21 	}
     22 
     23 	/* The second test box, with fixed height. */
     24 	#testBoxNotGrownHorizontallyByJS {
     25 		background: #F0F;
     26 		width: 20vh;
     27 		height: 60px;
     28 		float: left;
     29 	}
     30 
     31 	/* The third box, changed by using CSS transition. */
     32 	#testBoxWithTransition {
     33 		background: #FF0;
     34 		width: 20vh;
     35 		height: 40px;
     36 		float: left;
     37 		transition-property: width, height;
     38 		transition-duration: 0.3s;
     39 		transition-delay: 0;
     40 	}
     41 
     42 	/* The reference box, growing in both directions (height
     43 	   by script, width by `vh` units. */
     44 	#referenceBoxGrownHorizontallyByJS {
     45 		background: #0F0;
     46 		width: 20vh;
     47 		height: 40px;
     48 		float: left;
     49 	}
     50 </style>
     51 </head>
     52 <body>
     53 
     54 <p>
     55 All boxes should end up the same size. The green box is the reference one.
     56 </p>
     57 
     58 <div id="testBoxWithVhOnly"></div>
     59 <div id="testBoxNotGrownHorizontallyByJS"></div>
     60 <div id="testBoxWithTransition"></div>
     61 <div id="referenceBoxGrownHorizontallyByJS"></div>
     62 
     63 <script type="text/javascript">
     64 'use strict';
     65 
     66 function animate() {
     67 	var viewportHeight = document.documentElement.clientHeight;
     68 	var referenceDimension = Math.round(20 * viewportHeight / 100);
     69 
     70 	document.getElementById('referenceBoxGrownHorizontallyByJS')
     71 		.style['height'] = referenceDimension + "px";
     72 	if (referenceDimension < 60) {
     73 		setTimeout(animate, 20);
     74 	}
     75 }
     76 
     77 addEventListener('transitionend', event => {
     78 	if (event.propertyName == 'width') {
     79 		// Stop any further transitions.
     80 		testBoxWithTransition.style.transitionProperty = 'none';
     81 		parent.postMessage('transitionInIFrameEnded', '*');
     82 	}
     83 }, false);
     84 
     85 document.getElementById('testBoxWithTransition').style.height = "60px";
     86 setTimeout(animate, 20);
     87 parent.postMessage('frameLoaded', '*');
     88 </script>
     89 
     90 </body>
     91 </html>