LayoutTests/fast/regions/regions-widows-and-orphans.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <title>Testing Widows and Orphans</title>
 <script src="../../resources/js-test-pre.js"></script>
 <style>
 body.hide-containers .container, body.hide-containers h3 {
     display: none;
 }

 .region {
     height: 200px;
     -webkit-region-fragment: break;
     display: inline-block;
 }

 .region0 {
     width: 150px;
 }

 .region1 {
     width: 200px;
 }

 .region2 {
     width: 150px;
 }

 .container {
     width: 600px;
     height: 200px;
     line-height: 20px; /* 10 lines per page */
     font-size: 16px;
     margin: 0 0 20px 0;
     padding: 0;
     overflow: hidden;
 }

 .block {
     margin: 0 0 15px 0;
     padding: 0;
 }

 .top {
     color: red;
 }

 .bottom {
     color: green;
 }
 </style>
 <script>

 description("Testing widows and orphans. Any green lines should be at the bottom of regions, and any red lines should be at the top of regions.");

 if (window.testRunner)
     testRunner.dumpAsText();

 function createRegions(id, container)
 {
     for (var i = 0; i < 3; ++i) {
         var element = document.createElement("div");
         element.className = "region region" + i;
         element.style.webkitFlowFrom = id;

         container.appendChild(element);
     }
 }

 function createTestContainer(id, description, blocks)
 {
     var label = document.createElement("h3");
     label.textContent = id + " - " + description;
     document.body.appendChild(label);
     var element = document.createElement("div");
     element.className = "container";
     element.id = id;

     createRegions(id, element);

     for (var i = 1; i <= blocks.length; ++i) {
         var block = document.createElement("div");
         block.className = "block";
         var numLines = blocks[i-1];
         for (var j = 1; j <= numLines; ++j) {
             var line = document.createElement("span");
             line.id = id + "-block-" + i + "-line-" + j;
             line.textContent = "Block " + i + " Line " + j;
             block.appendChild(line);
             block.appendChild(document.createElement("br"));
         }
         block.style.webkitFlowInto = id;
         element.appendChild(block);
     }
     document.body.appendChild(element);
     return element;
 }

 function markTopLine(containerId, blockNumber, lineNumber)
 {
     var element = document.getElementById(containerId + "-block-" + blockNumber + "-line-" + lineNumber);
     element.className = "top";
 }

 function markBottomLine(containerId, blockNumber, lineNumber)
 {
     var element = document.getElementById(containerId + "-block-" + blockNumber + "-line-" + lineNumber);
     element.className = "bottom";
 }

 function testIsFirstInRegion(containerId, blockNumber, lineNumber)
 {
     var topOfContainer = document.getElementById(containerId).getBoundingClientRect().top;
     var topOfLine = document.getElementById(containerId + "-block-" + blockNumber + "-line-" + lineNumber).getBoundingClientRect().top;

     if (Math.abs(topOfContainer - topOfLine) < 5) // Give 5 pixels to account for subpixel layout.
         testPassed(containerId + " Block " + blockNumber + " Line " + lineNumber + " is correct.");
     else
         testFailed(containerId + " Block " + blockNumber + " Line " + lineNumber + " wasn't at the top of the region.");
 }

 function runTest()
 {
     var container;

     createTestContainer("test1", "Normal breaking", [5, 6, 5, 5]);

     markTopLine("test1", 1, 1);
     markBottomLine("test1", 2, 4);
     markTopLine("test1", 2, 5);
     markBottomLine("test1", 4, 1);
     markTopLine("test1", 4, 2);

     testIsFirstInRegion("test1", 1, 1);
     testIsFirstInRegion("test1", 2, 5);
     testIsFirstInRegion("test1", 4, 2);

     container = createTestContainer("test2", "Basic Orphan", [8, 6]);
     container.style.orphans = 2;

     markTopLine("test2", 1, 1);
     markBottomLine("test2", 1, 8); // Orphan break happens here.
     markTopLine("test2", 2, 1);

     testIsFirstInRegion("test2", 1, 1);
     testIsFirstInRegion("test2", 2, 1);

     container = createTestContainer("test3", "Basic Widow", [4, 6, 3]);
     container.style.widows = 2;

     markTopLine("test3", 1, 1);
     markBottomLine("test3", 2, 4); // Widow break happens here.
     markTopLine("test3", 2, 5);

     testIsFirstInRegion("test3", 1, 1);
     testIsFirstInRegion("test3", 2, 5);

     container = createTestContainer("test4", "Orphans causing Widows", [8, 6, 4, 4]);
     container.style.orphans = 2;
     container.style.widows = 2;

     markTopLine("test4", 1, 1);
     markBottomLine("test4", 1, 8); // Orphan break happens here.
     markTopLine("test4", 2, 1);
     markBottomLine("test4", 3, 2); // And that creates a widow forcing a break here.
     markTopLine("test4", 3, 3);

     testIsFirstInRegion("test4", 1, 1);
     testIsFirstInRegion("test4", 2, 1);
     testIsFirstInRegion("test4", 3, 3);

     container = createTestContainer("test5", "Widows blocked by Orphan rule", [7, 3, 4]);
     container.style.orphans = 2;
     container.style.widows = 2;

     markTopLine("test5", 1, 1);
     markBottomLine("test5", 2, 2); // This line should not move - protected by orphaning.
     markTopLine("test5", 2, 3); // This line won't be un-widowed - blocked by orphaning.

     testIsFirstInRegion("test5", 1, 1);
     testIsFirstInRegion("test5", 2, 3);

     container = createTestContainer("test6", "Ridiculous values", [7, 7, 7, 7]);
     container.style.orphans = 100;
     container.style.widows = 100;

     markTopLine("test6", 1, 1);
     markBottomLine("test6", 1, 7); // Orphan break happens here.
     markTopLine("test6", 2, 1); // Adopted.
     markBottomLine("test6", 2, 7); // Orphan break.
     markTopLine("test6", 3, 1); // Adopted.

     testIsFirstInRegion("test6", 1, 1);
     testIsFirstInRegion("test6", 2, 1);
     testIsFirstInRegion("test6", 3, 1);

     if (window.testRunner) {
         // Hide all the containers and leave just the test results for text output.
         document.body.className = "hide-containers";
     }

     isSuccessfullyParsed();
 }

 window.addEventListener("load", runTest, false);
 </script>
 </head>
 <body>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Testing Widows and Orphans</title>
	<script src="../../resources/js-test-pre.js"></script>
	<style>
	body.hide-containers .container, body.hide-containers h3 {
	display: none;
	}

	.region {
	height: 200px;
	-webkit-region-fragment: break;
	display: inline-block;
	}

	.region0 {
	width: 150px;
	}

	.region1 {
	width: 200px;
	}

	.region2 {
	width: 150px;
	}

	.container {
	width: 600px;
	height: 200px;
	line-height: 20px; /* 10 lines per page */
	font-size: 16px;
	margin: 0 0 20px 0;
	padding: 0;
	overflow: hidden;
	}

	.block {
	margin: 0 0 15px 0;
	padding: 0;
	}

	.top {
	color: red;
	}

	.bottom {
	color: green;
	}
	</style>
	<script>

	description("Testing widows and orphans. Any green lines should be at the bottom of regions, and any red lines should be at the top of regions.");

	if (window.testRunner)
	testRunner.dumpAsText();

	function createRegions(id, container)
	{
	for (var i = 0; i < 3; ++i) {
	var element = document.createElement("div");
	element.className = "region region" + i;
	element.style.webkitFlowFrom = id;

	container.appendChild(element);
	}
	}

	function createTestContainer(id, description, blocks)
	{
	var label = document.createElement("h3");
	label.textContent = id + " - " + description;
	document.body.appendChild(label);
	var element = document.createElement("div");
	element.className = "container";
	element.id = id;

	createRegions(id, element);

	for (var i = 1; i <= blocks.length; ++i) {
	var block = document.createElement("div");
	block.className = "block";
	var numLines = blocks[i-1];
	for (var j = 1; j <= numLines; ++j) {
	var line = document.createElement("span");
	line.id = id + "-block-" + i + "-line-" + j;
	line.textContent = "Block " + i + " Line " + j;
	block.appendChild(line);
	block.appendChild(document.createElement("br"));
	}
	block.style.webkitFlowInto = id;
	element.appendChild(block);
	}
	document.body.appendChild(element);
	return element;
	}

	function markTopLine(containerId, blockNumber, lineNumber)
	{
	var element = document.getElementById(containerId + "-block-" + blockNumber + "-line-" + lineNumber);
	element.className = "top";
	}

	function markBottomLine(containerId, blockNumber, lineNumber)
	{
	var element = document.getElementById(containerId + "-block-" + blockNumber + "-line-" + lineNumber);
	element.className = "bottom";
	}

	function testIsFirstInRegion(containerId, blockNumber, lineNumber)
	{
	var topOfContainer = document.getElementById(containerId).getBoundingClientRect().top;
	var topOfLine = document.getElementById(containerId + "-block-" + blockNumber + "-line-" + lineNumber).getBoundingClientRect().top;

	if (Math.abs(topOfContainer - topOfLine) < 5) // Give 5 pixels to account for subpixel layout.
	testPassed(containerId + " Block " + blockNumber + " Line " + lineNumber + " is correct.");
	else
	testFailed(containerId + " Block " + blockNumber + " Line " + lineNumber + " wasn't at the top of the region.");
	}

	function runTest()
	{
	var container;

	createTestContainer("test1", "Normal breaking", [5, 6, 5, 5]);

	markTopLine("test1", 1, 1);
	markBottomLine("test1", 2, 4);
	markTopLine("test1", 2, 5);
	markBottomLine("test1", 4, 1);
	markTopLine("test1", 4, 2);

	testIsFirstInRegion("test1", 1, 1);
	testIsFirstInRegion("test1", 2, 5);
	testIsFirstInRegion("test1", 4, 2);

	container = createTestContainer("test2", "Basic Orphan", [8, 6]);
	container.style.orphans = 2;

	markTopLine("test2", 1, 1);
	markBottomLine("test2", 1, 8); // Orphan break happens here.
	markTopLine("test2", 2, 1);

	testIsFirstInRegion("test2", 1, 1);
	testIsFirstInRegion("test2", 2, 1);

	container = createTestContainer("test3", "Basic Widow", [4, 6, 3]);
	container.style.widows = 2;

	markTopLine("test3", 1, 1);
	markBottomLine("test3", 2, 4); // Widow break happens here.
	markTopLine("test3", 2, 5);

	testIsFirstInRegion("test3", 1, 1);
	testIsFirstInRegion("test3", 2, 5);

	container = createTestContainer("test4", "Orphans causing Widows", [8, 6, 4, 4]);
	container.style.orphans = 2;
	container.style.widows = 2;

	markTopLine("test4", 1, 1);
	markBottomLine("test4", 1, 8); // Orphan break happens here.
	markTopLine("test4", 2, 1);
	markBottomLine("test4", 3, 2); // And that creates a widow forcing a break here.
	markTopLine("test4", 3, 3);

	testIsFirstInRegion("test4", 1, 1);
	testIsFirstInRegion("test4", 2, 1);
	testIsFirstInRegion("test4", 3, 3);

	container = createTestContainer("test5", "Widows blocked by Orphan rule", [7, 3, 4]);
	container.style.orphans = 2;
	container.style.widows = 2;

	markTopLine("test5", 1, 1);
	markBottomLine("test5", 2, 2); // This line should not move - protected by orphaning.
	markTopLine("test5", 2, 3); // This line won't be un-widowed - blocked by orphaning.

	testIsFirstInRegion("test5", 1, 1);
	testIsFirstInRegion("test5", 2, 3);

	container = createTestContainer("test6", "Ridiculous values", [7, 7, 7, 7]);
	container.style.orphans = 100;
	container.style.widows = 100;

	markTopLine("test6", 1, 1);
	markBottomLine("test6", 1, 7); // Orphan break happens here.
	markTopLine("test6", 2, 1); // Adopted.
	markBottomLine("test6", 2, 7); // Orphan break.
	markTopLine("test6", 3, 1); // Adopted.

	testIsFirstInRegion("test6", 1, 1);
	testIsFirstInRegion("test6", 2, 1);
	testIsFirstInRegion("test6", 3, 1);

	if (window.testRunner) {
	// Hide all the containers and leave just the test results for text output.
	document.body.className = "hide-containers";
	}

	isSuccessfullyParsed();
	}

	window.addEventListener("load", runTest, false);
	</script>
	</head>
	<body>
	</body>
	</html>