LayoutTests/fast/multicol/client-rects-spanners-complex.html - WebKit - Git at Google

 <head>
 <style>
     div.columns {
         display:inline-block;
         block-size: 90px;
         inline-size: 100px;
         margin-block-start: 10px;
         margin-block-end: 10px;
          padding: 5px;
         border: solid black;
         font-family: ahem;
         font-size: 25px;
         color: lightblue;
         -webkit-columns: 2;
         -webkit-column-gap: 5px;
         -webkit-column-fill: auto;
         columns: 2;
         column-gap: 5px;
         column-fill: auto;
     }

     div.marker {
         position: absolute;
         border: solid rgba(0, 0, 255, 0.5);
         -webkit-box-sizing: border-box;
     }

     input[type="range"] {
         -webkit-appearance: none;
         width: 25px;
         height: 25px;
         background-color: lightblue;
     }

     input[type="range"]::-webkit-slider-thumb {
         -webkit-appearance: none;
     }

     .vertical { -webkit-writing-mode: vertical-lr; }
     .vertical.flipped { -webkit-writing-mode: vertical-rl; }

     div.span { -webkit-column-span: all; block-size:30px; background-color:silver; }

     div.above { background-color: navy; block-size:10px; }

 </style>
 </head>
 <p>
     The blue borders should coincide with light blue squares, like this:
     <span style="display: inline-block; background-color: lightblue; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
     There should be none of this:
     <span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
     or this:
     <span style="display: inline-block; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
 </p>
 <div class="columns" id="t1"><div class="above"></div><div class="span"></div>
     <br>x y z
 </div>

 <div class="columns"><div class="above"></div><div class="span"></div>
     <br><span id="t2">x y z</span>
 </div>

 <div class="columns"><div class="above"></div><div class="span"></div>
     <br><div id="t3">x y z</div>
 </div>

 <div class="columns"><div class="above"></div><div class="span"></div>
     <br><div id="t4"><br>y z</div>
 </div>

 <div class="columns"><div class="above"></div><div class="span"></div>
     <br><div><br><input id="t5" type="range"></div>
 </div>

 <div class="columns"><div class="above"></div><div class="span"></div>
     <br><div><br><img id="t6" style="width: 25px; height: 25px; background-color: lightblue;"></div>
 </div>
 <div class="columns"><div class="above"></div><div class="span"></div>
     <div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
 </div>

 <div class="columns vertical" id="t8"><div class="above"></div><div class="span"></div>
     <br>x y z
 </div>

 <div class="columns vertical"><div class="above"></div><div class="span"></div>
     <br><span id="t9">x y z</span>
 </div>

 <div class="columns vertical"><div class="above"></div><div class="span"></div>
     <br><div id="t10">x y z</div>
 </div>

 <div class="columns vertical"><div class="above"></div><div class="span"></div>
     <br><div id="t11"><br>y z</div>
 </div>

 <div class="columns vertical"><div class="above"></div><div class="span"></div>
     <br><div><br><input id="t12" type="range"></div>
 </div>

 <div class="columns vertical"><div class="above"></div><div class="span"></div>
     <br><div><br><img id="t13" style="width: 25px; height: 25px; background-color: lightblue;"></div>
 </div>
 <div class="columns vertical"><div class="above"></div><div class="span"></div>
     <div id="t14" style=" margin-block-start: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
 </div>


 <div class="columns vertical flipped" id="t15"><div class="above"></div><div class="span"></div>
     <br>x y z
 </div>

 <div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
     <br><span id="t16">x y z</span>
 </div>

 <div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
     <br><div id="t17">x y z</div>
 </div>

 <div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
     <br><div id="t18"><br>y z</div>
 </div>

 <div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
     <br><div><br><input id="t19" type="range"></div>
 </div>

 <div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
     <br><div><br><img id="t20" style="width: 25px; height: 25px; background-color: lightblue;"></div>
 </div>
 <div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
     <div id="t21" style="margin-block-start: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
 </div>

 <script>
     function placeMarker(clientRect)
     {
         var marker = document.body.appendChild(document.createElement("div"));
         marker.className = "marker";
         marker.style.left = clientRect.left + "px";
         marker.style.top = clientRect.top + "px";
         marker.style.width = clientRect.width + "px";
         marker.style.height = clientRect.height + "px";
     }

     function placeMarkersForRange(range, startOffset)
     {
         if (startOffset === undefined)
             startOffset = 0;

         var clientRects = range.getClientRects();
         for (var i = startOffset; i < clientRects.length; ++i)
             placeMarker(clientRects[i]);
     }

     var range = document.createRange();

     var textNode = document.getElementById("t1").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
     range.setStart(textNode, 0);
     range.setEnd(textNode, 5);
     placeMarkersForRange(range);

     textNode = document.getElementById("t2").firstChild;
     range.setStart(textNode, 0);
     range.setEnd(textNode, 5);
     placeMarkersForRange(range);

     textNode = document.getElementById("t3").firstChild;
     range.setStart(textNode, 0);
     range.setEnd(textNode, 5);
     placeMarkersForRange(range);

     var block = document.getElementById("t4");
     range.selectNode(block);
     placeMarkersForRange(range, 2);

     var slider = document.getElementById("t5");
     range.selectNode(slider);
     placeMarkersForRange(range);

     var image = document.getElementById("t6");
     range.selectNode(image);
     placeMarkersForRange(range);

     var div = document.getElementById("t7");
     range.selectNode(div);
     placeMarkersForRange(div);

     var textNode = document.getElementById("t8").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
     range.setStart(textNode, 0);
     range.setEnd(textNode, 5);
     placeMarkersForRange(range);

     textNode = document.getElementById("t9").firstChild;
     range.setStart(textNode, 0);
     range.setEnd(textNode, 5);
     placeMarkersForRange(range);

     textNode = document.getElementById("t10").firstChild;
     range.setStart(textNode, 0);
     range.setEnd(textNode, 5);
     placeMarkersForRange(range);

     var block = document.getElementById("t11");
     range.selectNode(block);
     placeMarkersForRange(range, 2);

     var slider = document.getElementById("t12");
     range.selectNode(slider);
     placeMarkersForRange(range);

     var image = document.getElementById("t13");
     range.selectNode(image);
     placeMarkersForRange(range);

     var div = document.getElementById("t14");
     range.selectNode(div);
     placeMarkersForRange(div);

     var textNode = document.getElementById("t15").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
     range.setStart(textNode, 0);
     range.setEnd(textNode, 5);
     placeMarkersForRange(range);

     textNode = document.getElementById("t16").firstChild;
     range.setStart(textNode, 0);
     range.setEnd(textNode, 5);
     placeMarkersForRange(range);

     textNode = document.getElementById("t17").firstChild;
     range.setStart(textNode, 0);
     range.setEnd(textNode, 5);
     placeMarkersForRange(range);

     var block = document.getElementById("t18");
     range.selectNode(block);
     placeMarkersForRange(range, 2);

     var slider = document.getElementById("t19");
     range.selectNode(slider);
     placeMarkersForRange(range);

     var image = document.getElementById("t20");
     range.selectNode(image);
     placeMarkersForRange(range);

     var div = document.getElementById("t21");
     range.selectNode(div);
     placeMarkersForRange(div);

 </script>
	<head>
	<style>
	div.columns {
	display:inline-block;
	block-size: 90px;
	inline-size: 100px;
	margin-block-start: 10px;
	margin-block-end: 10px;
	padding: 5px;
	border: solid black;
	font-family: ahem;
	font-size: 25px;
	color: lightblue;
	-webkit-columns: 2;
	-webkit-column-gap: 5px;
	-webkit-column-fill: auto;
	columns: 2;
	column-gap: 5px;
	column-fill: auto;
	}

	div.marker {
	position: absolute;
	border: solid rgba(0, 0, 255, 0.5);
	-webkit-box-sizing: border-box;
	}

	input[type="range"] {
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	background-color: lightblue;
	}

	input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	}

	.vertical { -webkit-writing-mode: vertical-lr; }
	.vertical.flipped { -webkit-writing-mode: vertical-rl; }

	div.span { -webkit-column-span: all; block-size:30px; background-color:silver; }

	div.above { background-color: navy; block-size:10px; }

	</style>
	</head>
	<p>
	The blue borders should coincide with light blue squares, like this:
	<span style="display: inline-block; background-color: lightblue; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
	There should be none of this:
	<span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
	or this:
	<span style="display: inline-block; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
	</p>
	<div class="columns" id="t1"><div class="above"></div><div class="span"></div>
	<br>x y z
	</div>

	<div class="columns"><div class="above"></div><div class="span"></div>
	<br><span id="t2">x y z</span>
	</div>

	<div class="columns"><div class="above"></div><div class="span"></div>
	<br><div id="t3">x y z</div>
	</div>

	<div class="columns"><div class="above"></div><div class="span"></div>
	<br><div id="t4"><br>y z</div>
	</div>

	<div class="columns"><div class="above"></div><div class="span"></div>
	<br><div><br><input id="t5" type="range"></div>
	</div>

	<div class="columns"><div class="above"></div><div class="span"></div>
	<br><div><br><img id="t6" style="width: 25px; height: 25px; background-color: lightblue;"></div>
	</div>
	<div class="columns"><div class="above"></div><div class="span"></div>
	<div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
	</div>

	<div class="columns vertical" id="t8"><div class="above"></div><div class="span"></div>
	<br>x y z
	</div>

	<div class="columns vertical"><div class="above"></div><div class="span"></div>
	<br><span id="t9">x y z</span>
	</div>

	<div class="columns vertical"><div class="above"></div><div class="span"></div>
	<br><div id="t10">x y z</div>
	</div>

	<div class="columns vertical"><div class="above"></div><div class="span"></div>
	<br><div id="t11"><br>y z</div>
	</div>

	<div class="columns vertical"><div class="above"></div><div class="span"></div>
	<br><div><br><input id="t12" type="range"></div>
	</div>

	<div class="columns vertical"><div class="above"></div><div class="span"></div>
	<br><div><br><img id="t13" style="width: 25px; height: 25px; background-color: lightblue;"></div>
	</div>
	<div class="columns vertical"><div class="above"></div><div class="span"></div>
	<div id="t14" style=" margin-block-start: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
	</div>


	<div class="columns vertical flipped" id="t15"><div class="above"></div><div class="span"></div>
	<br>x y z
	</div>

	<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
	<br><span id="t16">x y z</span>
	</div>

	<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
	<br><div id="t17">x y z</div>
	</div>

	<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
	<br><div id="t18"><br>y z</div>
	</div>

	<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
	<br><div><br><input id="t19" type="range"></div>
	</div>

	<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
	<br><div><br><img id="t20" style="width: 25px; height: 25px; background-color: lightblue;"></div>
	</div>
	<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
	<div id="t21" style="margin-block-start: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
	</div>

	<script>
	function placeMarker(clientRect)
	{
	var marker = document.body.appendChild(document.createElement("div"));
	marker.className = "marker";
	marker.style.left = clientRect.left + "px";
	marker.style.top = clientRect.top + "px";
	marker.style.width = clientRect.width + "px";
	marker.style.height = clientRect.height + "px";
	}

	function placeMarkersForRange(range, startOffset)
	{
	if (startOffset === undefined)
	startOffset = 0;

	var clientRects = range.getClientRects();
	for (var i = startOffset; i < clientRects.length; ++i)
	placeMarker(clientRects[i]);
	}

	var range = document.createRange();

	var textNode = document.getElementById("t1").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
	range.setStart(textNode, 0);
	range.setEnd(textNode, 5);
	placeMarkersForRange(range);

	textNode = document.getElementById("t2").firstChild;
	range.setStart(textNode, 0);
	range.setEnd(textNode, 5);
	placeMarkersForRange(range);

	textNode = document.getElementById("t3").firstChild;
	range.setStart(textNode, 0);
	range.setEnd(textNode, 5);
	placeMarkersForRange(range);

	var block = document.getElementById("t4");
	range.selectNode(block);
	placeMarkersForRange(range, 2);

	var slider = document.getElementById("t5");
	range.selectNode(slider);
	placeMarkersForRange(range);

	var image = document.getElementById("t6");
	range.selectNode(image);
	placeMarkersForRange(range);

	var div = document.getElementById("t7");
	range.selectNode(div);
	placeMarkersForRange(div);

	var textNode = document.getElementById("t8").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
	range.setStart(textNode, 0);
	range.setEnd(textNode, 5);
	placeMarkersForRange(range);

	textNode = document.getElementById("t9").firstChild;
	range.setStart(textNode, 0);
	range.setEnd(textNode, 5);
	placeMarkersForRange(range);

	textNode = document.getElementById("t10").firstChild;
	range.setStart(textNode, 0);
	range.setEnd(textNode, 5);
	placeMarkersForRange(range);

	var block = document.getElementById("t11");
	range.selectNode(block);
	placeMarkersForRange(range, 2);

	var slider = document.getElementById("t12");
	range.selectNode(slider);
	placeMarkersForRange(range);

	var image = document.getElementById("t13");
	range.selectNode(image);
	placeMarkersForRange(range);

	var div = document.getElementById("t14");
	range.selectNode(div);
	placeMarkersForRange(div);

	var textNode = document.getElementById("t15").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
	range.setStart(textNode, 0);
	range.setEnd(textNode, 5);
	placeMarkersForRange(range);

	textNode = document.getElementById("t16").firstChild;
	range.setStart(textNode, 0);
	range.setEnd(textNode, 5);
	placeMarkersForRange(range);

	textNode = document.getElementById("t17").firstChild;
	range.setStart(textNode, 0);
	range.setEnd(textNode, 5);
	placeMarkersForRange(range);

	var block = document.getElementById("t18");
	range.selectNode(block);
	placeMarkersForRange(range, 2);

	var slider = document.getElementById("t19");
	range.selectNode(slider);
	placeMarkersForRange(range);

	var image = document.getElementById("t20");
	range.selectNode(image);
	placeMarkersForRange(range);

	var div = document.getElementById("t21");
	range.selectNode(div);
	placeMarkersForRange(div);

	</script>