chromium/src/third_party/blink/web_tests/external/wpt/css/css-writing-modes/tools/generators/orthogonal-parent-shrink-to-fit.ejs - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <%
 var testlist = [];
 var outers = [
     ["inline-block", '<div class="inline-block">', '</div><span class="next">ZZ</span>'],
     ["float", '<div class="float">', '</div><span class="next">ZZ</span>'],
     ["table-cell", '<table><tr><td>', '</td><td class="next">ZZ</td></tr></table>']];
 var middles = [
     null,
     ["inline-block", '<div class="inline-block">', '</div>']];
 var targets = [
     ["block", '<div class="target">HH</div>'],
     ["inline", '<span class="target">HH</span>'],
     ["block with borders", '<div class="target border">HHH</div>'],
     ["inline with borders", '<span class="target border">HHH</span>']];
 for (var outer of outers) {
     for (var middle of middles) {
         for (var target of targets) {
             var title = target[0];
             var html = target[1];
             if (middle) {
                 title += " in " + middle[0];
                 html = middle[1] + html + middle[2];
             }
             title = "Shrink-to-fit " + outer[0] + " with a child of orthogonal " + title;
             html = outer[1] + html + outer[2];
             testlist.push([title, html]);
         }
     }
 }
 var min, limit, title;
 if (index < 0) {
     min = 0;
     limit = testlist.length;
     title = "Shrink-to-fit with orthogonal children"
 } else {
     min = index;
     limit = index + 1;
     title = testlist[index][0];
 }
 %><title>CSS Writing Modes Test: <%= title %></title>
 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
 <meta name="assert" content="<%= title %>">
 <meta name="flags" content="ahem dom<%= index < 0 ? ' combo' : ''%>">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <style>
 .test {
     border:thin solid;
     font:20px/1 Ahem;
 }
 .target {
     color:blue;
     height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
     not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
     writing-mode:vertical-rl;
 }
 .border {
     border-right:blue solid .5em;
 }
 .next {
     color:orange;
 }
 .inline-block {
     display:inline-block;
 }
 .float {
     float:left;
 }
 h3 {
     clear:both;
 }
 h3.fail {
     color:red;
 }
 table {
     border-spacing:0px;
 }
 td {
     padding:0px;
 }
 </style>
 <div id="log"></div>
 <div id="container">
 <p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
 <p>If script is enabled, there should be one or more PASS and no FAIL.
 <% for (var i = min; i < limit; ++i) {
     var test = testlist[i];
 %><h3><%= (i + 1) + ": " + test[0] %></h3>
 <div class="test">
     <%- test[1] %>
 </div>
 <% } %></div>
 <script>
 if (window.location.search == "?wait") {
     console.log("Sleeping 5 secs for debug");
     setup({explicit_done:true});
     window.setTimeout(run, 5000);
 } else {
     run();
 }

 function run() {
     Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
         var title = node.previousElementSibling.textContent;
         test(function () {
             try {
                 var targetNode = node.querySelector(".target");
                 var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
                 var targetBounds = targetNode.getBoundingClientRect();
                 assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
                 var nextNode = node.querySelector(".next");
                 var nextBounds = nextNode.getBoundingClientRect();
                 assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
             } catch (e) {
                 node.previousElementSibling.classList.add("fail");
                 throw e;
             }
         }, title);
     });
     done();
 }
 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<%
	var testlist = [];
	var outers = [
	["inline-block", '<div class="inline-block">', '</div><span class="next">ZZ</span>'],
	["float", '<div class="float">', '</div><span class="next">ZZ</span>'],
	["table-cell", '<table><tr><td>', '</td><td class="next">ZZ</td></tr></table>']];
	var middles = [
	null,
	["inline-block", '<div class="inline-block">', '</div>']];
	var targets = [
	["block", '<div class="target">HH</div>'],
	["inline", '<span class="target">HH</span>'],
	["block with borders", '<div class="target border">HHH</div>'],
	["inline with borders", '<span class="target border">HHH</span>']];
	for (var outer of outers) {
	for (var middle of middles) {
	for (var target of targets) {
	var title = target[0];
	var html = target[1];
	if (middle) {
	title += " in " + middle[0];
	html = middle[1] + html + middle[2];
	}
	title = "Shrink-to-fit " + outer[0] + " with a child of orthogonal " + title;
	html = outer[1] + html + outer[2];
	testlist.push([title, html]);
	}
	}
	}
	var min, limit, title;
	if (index < 0) {
	min = 0;
	limit = testlist.length;
	title = "Shrink-to-fit with orthogonal children"
	} else {
	min = index;
	limit = index + 1;
	title = testlist[index][0];
	}
	%><title>CSS Writing Modes Test: <%= title %></title>
	<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
	<meta name="assert" content="<%= title %>">
	<meta name="flags" content="ahem dom<%= index < 0 ? ' combo' : ''%>">
	<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
	<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
	<style>
	.test {
	border:thin solid;
	font:20px/1 Ahem;
	}
	.target {
	color:blue;
	height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
	not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
	writing-mode:vertical-rl;
	}
	.border {
	border-right:blue solid .5em;
	}
	.next {
	color:orange;
	}
	.inline-block {
	display:inline-block;
	}
	.float {
	float:left;
	}
	h3 {
	clear:both;
	}
	h3.fail {
	color:red;
	}
	table {
	border-spacing:0px;
	}
	td {
	padding:0px;
	}
	</style>
	<div id="log"></div>
	<div id="container">
	<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
	<p>If script is enabled, there should be one or more PASS and no FAIL.
	<% for (var i = min; i < limit; ++i) {
	var test = testlist[i];
	%><h3><%= (i + 1) + ": " + test[0] %></h3>
	<div class="test">
	<%- test[1] %>
	</div>
	<% } %></div>
	<script>
	if (window.location.search == "?wait") {
	console.log("Sleeping 5 secs for debug");
	setup({explicit_done:true});
	window.setTimeout(run, 5000);
	} else {
	run();
	}

	function run() {
	Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
	var title = node.previousElementSibling.textContent;
	test(function () {
	try {
	var targetNode = node.querySelector(".target");
	var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
	var targetBounds = targetNode.getBoundingClientRect();
	assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
	var nextNode = node.querySelector(".next");
	var nextBounds = nextNode.getBoundingClientRect();
	assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
	} catch (e) {
	node.previousElementSibling.classList.add("fail");
	throw e;
	}
	}, title);
	});
	done();
	}
	</script>