| <head> |
| <style> |
| div.columns { |
| display:inline-block; |
| block-size: 60px; |
| 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:10px; background-color:silver; } |
| |
| </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="span"></div> |
| <br>x y z |
| </div> |
| |
| <div class="columns"><div class="span"></div> |
| <br><span id="t2">x y z</span> |
| </div> |
| |
| <div class="columns"><div class="span"></div> |
| <br><div id="t3">x y z</div> |
| </div> |
| |
| <div class="columns"><div class="span"></div> |
| <br><div id="t4"><br>y z</div> |
| </div> |
| |
| <div class="columns"><div class="span"></div> |
| <br><div><br><input id="t5" type="range"></div> |
| </div> |
| |
| <div class="columns"><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="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="span"></div> |
| <br>x y z |
| </div> |
| |
| <div class="columns vertical"><div class="span"></div> |
| <br><span id="t9">x y z</span> |
| </div> |
| |
| <div class="columns vertical"><div class="span"></div> |
| <br><div id="t10">x y z</div> |
| </div> |
| |
| <div class="columns vertical"><div class="span"></div> |
| <br><div id="t11"><br>y z</div> |
| </div> |
| |
| <div class="columns vertical"><div class="span"></div> |
| <br><div><br><input id="t12" type="range"></div> |
| </div> |
| |
| <div class="columns vertical"><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="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="span"></div> |
| <br>x y z |
| </div> |
| |
| <div class="columns vertical flipped"><div class="span"></div> |
| <br><span id="t16">x y z</span> |
| </div> |
| |
| <div class="columns vertical flipped"><div class="span"></div> |
| <br><div id="t17">x y z</div> |
| </div> |
| |
| <div class="columns vertical flipped"><div class="span"></div> |
| <br><div id="t18"><br>y z</div> |
| </div> |
| |
| <div class="columns vertical flipped"><div class="span"></div> |
| <br><div><br><input id="t19" type="range"></div> |
| </div> |
| |
| <div class="columns vertical flipped"><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="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; |
| 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; |
| 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; |
| 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> |
