| OLD | NEW |
|---|
| (Empty) |
| 1 <style> | |
| 2 div.columns { | |
| 3 height: 50px; | |
| 4 width: 110px; | |
| 5 margin: 10px 0; | |
| 6 padding: 10px; | |
| 7 border: solid black; | |
| 8 font-family: Ahem; | |
| 9 font-size: 25px; | |
| 10 color: lightblue; | |
| 11 -webkit-columns: 2; | |
| 12 -webkit-column-gap: 10px; | |
| 13 columns: 2; | |
| 14 column-gap: 10px; | |
| 15 column-fill: auto; | |
| 16 } | |
| 17 | |
| 18 div.marker { | |
| 19 position: absolute; | |
| 20 border: solid rgba(0, 0, 255, 0.5); | |
| 21 -webkit-box-sizing: border-box; | |
| 22 } | |
| 23 | |
| 24 input[type="range"] { | |
| 25 -webkit-appearance: none; | |
| 26 width: 25px; | |
| 27 height: 25px; | |
| 28 background-color: lightblue; | |
| 29 } | |
| 30 | |
| 31 input[type="range"]::-webkit-slider-thumb { | |
| 32 -webkit-appearance: none; | |
| 33 } | |
| 34 </style> | |
| 35 <p> | |
| 36 The blue borders should coincide with light blue squares, like this: | |
| 37 <span style="display: inline-block; background-color: lightblue; border: sol
id rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>. | |
| 38 There should be none of this: | |
| 39 <span style="display: inline-block; background-color: lightblue; width: 25px
; height: 25px;"></span> | |
| 40 or this: | |
| 41 <span style="display: inline-block; border: solid rgba(0, 0, 255, 0.5); widt
h: 19px; height: 19px;"></span>. | |
| 42 </p> | |
| 43 <div class="columns" id="t1"> | |
| 44 <br>x y z | |
| 45 </div> | |
| 46 | |
| 47 <div class="columns"> | |
| 48 <br><span id="t2">x y z</span> | |
| 49 </div> | |
| 50 | |
| 51 <div class="columns"> | |
| 52 <br><div id="t3">x y z</div> | |
| 53 </div> | |
| 54 | |
| 55 <div class="columns"> | |
| 56 <br><div id="t4"><br>y z</div> | |
| 57 </div> | |
| 58 | |
| 59 <div class="columns"> | |
| 60 <br><div><br><input id="t5" type="range"></div> | |
| 61 </div> | |
| 62 | |
| 63 <div class="columns"> | |
| 64 <br><div><br><img id="t6" style="width: 25px; height: 25px; background-color
: lightblue;"></div> | |
| 65 </div> | |
| 66 | |
| 67 <p> | |
| 68 Except here, where the blue border should be around the bigger slice of the
blue square, on the right. | |
| 69 </p> | |
| 70 | |
| 71 <div class="columns"> | |
| 72 <div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background
-color: lightblue;"></div> | |
| 73 </div> | |
| 74 | |
| 75 <script> | |
| 76 function placeMarker(clientRect) | |
| 77 { | |
| 78 var marker = document.body.appendChild(document.createElement("div")); | |
| 79 marker.className = "marker"; | |
| 80 marker.style.left = clientRect.left + "px"; | |
| 81 marker.style.top = clientRect.top + "px"; | |
| 82 marker.style.width = clientRect.width + "px"; | |
| 83 marker.style.height = clientRect.height + "px"; | |
| 84 } | |
| 85 | |
| 86 function placeMarkersForRange(range, startOffset) | |
| 87 { | |
| 88 if (startOffset === undefined) | |
| 89 startOffset = 0; | |
| 90 | |
| 91 var clientRects = range.getClientRects(); | |
| 92 for (var i = startOffset; i < clientRects.length; ++i) | |
| 93 placeMarker(clientRects[i]); | |
| 94 } | |
| 95 | |
| 96 var range = document.createRange(); | |
| 97 | |
| 98 var textNode = document.getElementById("t1").firstChild.nextSibling.nextSibl
ing; | |
| 99 range.setStart(textNode, 0); | |
| 100 range.setEnd(textNode, 5); | |
| 101 placeMarkersForRange(range); | |
| 102 | |
| 103 textNode = document.getElementById("t2").firstChild; | |
| 104 range.setStart(textNode, 0); | |
| 105 range.setEnd(textNode, 5); | |
| 106 placeMarkersForRange(range); | |
| 107 | |
| 108 textNode = document.getElementById("t3").firstChild; | |
| 109 range.setStart(textNode, 0); | |
| 110 range.setEnd(textNode, 5); | |
| 111 placeMarkersForRange(range); | |
| 112 | |
| 113 var block = document.getElementById("t4"); | |
| 114 range.selectNode(block); | |
| 115 placeMarkersForRange(range, 1); | |
| 116 | |
| 117 var slider = document.getElementById("t5"); | |
| 118 range.selectNode(slider); | |
| 119 placeMarkersForRange(range); | |
| 120 | |
| 121 var image = document.getElementById("t6"); | |
| 122 range.selectNode(image); | |
| 123 placeMarkersForRange(range); | |
| 124 | |
| 125 var div = document.getElementById("t7"); | |
| 126 range.selectNode(div); | |
| 127 placeMarkersForRange(div); | |
| 128 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 299373006:
Move old multicol tests to a separate directory. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master