luislobo14rap · June 13, 2018 23:22
diff --git a/eqcss-tests.html b/eqcss-tests.html
 <!-- eqcss-tests.html v1 -->
 <!doctype html>
 <html lang="pt-br">

 <head>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 	<title>bootstrap starter template</title>
 </head>

 <body>

 	<div class="box-1 text-center table-container">
 		<div>
 			color if this orientation is: [square, portrait, landscape]
 			<br>
 			<br>
 			<button class="square">square</button>
 			<button class="portrait">portrait</button>
 			<button class="landscape">landscape</button>
 		</div>
 	</div>

 	<div class="box-2 text-center table-container">
 		<div class="box-2-1">color in parent</div>
 	</div>

 	<div class="box-3 text-center table-container">
 		<div class="box-3-1">COLOR!</div>
 		<div class="box-3-2">&nbsp;color in prev</div>
 	</div>

 	<div class="box-4 text-center table-container">
 		<div class="box-4-1">color in next&nbsp;</div>
 		<div class="box-4-2">COLOR!</div>
 	</div>


 	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 	<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.0/EQCSS-polyfills.min.js"></script><![endif]-->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.0/EQCSS.min.js"></script>

 	<style>
 		/* table-container.css v1 */
 		.table-container{
 			display: table;
 			height: 100%;
 			margin-left: auto;
 			margin-right: auto;
 		}
 		.table-container > *{
 			display: table-cell;
 			vertical-align: middle;
 		}





 		.box-1{
 			width: 500px;
 			height: 100px;
 		}

 		.box-2{
 			width: 500px;
 			height: 100px;
 		}
 	</style>

 	<script type="text/eqcss">
 		/* box-1 if landscape */
 		@element .box-1 and (orientation: square) {
 			eq_this{
 				background: red;
 			}
 		}
 		@element .box-1 and (orientation: portrait) {
 			eq_this{
 				background: green;
 			}
 		}
 		@element .box-1 and (orientation: landscape) {
 			eq_this{
 				background: blue;
 			}
 		}

 		/* box-2 parent */
 		@element .box-2-1 {
 			eq_parent{
 				background: grey;
 			}
 		}

 		/* box-3 prev */
 		@element .box-3-2 {
 			eq_prev{
 				background: grey;
 			}
 		}

 		/* box-4 next */
 		@element .box-4-1 {
 			eq_next{
 				background: grey;
 			}
 		}



 	</script>
 	<script>
 		$(function(){

 			$('.square').on('click', function(){
 				$(this).parent().parent().css({
 					height: 500,
 					width: 500
 				});
 			});
 			$('.portrait').on('click', function(){
 				$(this).parent().parent().css({
 					height: 600,
 					width: 500
 				});
 			});
 			$('.landscape').on('click', function(){
 				$(this).parent().parent().css({
 					height: 500,
 					width: 600
 				});
 			});


 		});
 	</script>
 </body>

 </html>
	<!-- eqcss-tests.html v1 -->
	<!doctype html>
	<html lang="pt-br">

	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	<title>bootstrap starter template</title>
	</head>

	<body>

	<div class="box-1 text-center table-container">
	<div>
	color if this orientation is: [square, portrait, landscape]
	<br>
	<br>
	<button class="square">square</button>
	<button class="portrait">portrait</button>
	<button class="landscape">landscape</button>
	</div>
	</div>

	<div class="box-2 text-center table-container">
	<div class="box-2-1">color in parent</div>
	</div>

	<div class="box-3 text-center table-container">
	<div class="box-3-1">COLOR!</div>
	<div class="box-3-2"> color in prev</div>
	</div>

	<div class="box-4 text-center table-container">
	<div class="box-4-1">color in next </div>
	<div class="box-4-2">COLOR!</div>
	</div>


	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

	<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.0/EQCSS-polyfills.min.js"></script><![endif]-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.0/EQCSS.min.js"></script>

	<style>
	/* table-container.css v1 */
	.table-container{
	display: table;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	}
	.table-container > *{
	display: table-cell;
	vertical-align: middle;
	}





	.box-1{
	width: 500px;
	height: 100px;
	}

	.box-2{
	width: 500px;
	height: 100px;
	}
	</style>

	<script type="text/eqcss">
	/* box-1 if landscape */
	@element .box-1 and (orientation: square) {
	eq_this{
	background: red;
	}
	}
	@element .box-1 and (orientation: portrait) {
	eq_this{
	background: green;
	}
	}
	@element .box-1 and (orientation: landscape) {
	eq_this{
	background: blue;
	}
	}

	/* box-2 parent */
	@element .box-2-1 {
	eq_parent{
	background: grey;
	}
	}

	/* box-3 prev */
	@element .box-3-2 {
	eq_prev{
	background: grey;
	}
	}

	/* box-4 next */
	@element .box-4-1 {
	eq_next{
	background: grey;
	}
	}



	</script>
	<script>
	$(function(){

	$('.square').on('click', function(){
	$(this).parent().parent().css({
	height: 500,
	width: 500
	});
	});
	$('.portrait').on('click', function(){
	$(this).parent().parent().css({
	height: 600,
	width: 500
	});
	});
	$('.landscape').on('click', function(){
	$(this).parent().parent().css({
	height: 500,
	width: 600
	});
	});


	});
	</script>
	</body>

	</html>