Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / multicol / client-rects.html
blobb230834cc1468d530582982752e96327b96f2f38
1 <!DOCTYPE html>
2 <script src="../../resources/ahem.js"></script>
3 <style>
4 div.columns {
5 height: 50px;
6 width: 110px;
7 margin: 10px 0;
8 padding: 10px;
9 border: solid black;
10 font-family: Ahem;
11 font-size: 25px;
12 color: lightblue;
13 -webkit-columns: 2;
14 -webkit-column-gap: 10px;
15 columns: 2;
16 column-gap: 10px;
17 column-fill: auto;
18 display: inline-block;
19 vertical-align: bottom;
22 div.marker {
23 position: absolute;
24 border: solid dodgerblue;
25 -webkit-box-sizing: border-box;
28 input[type="range"] {
29 -webkit-appearance: none;
30 width: 25px;
31 height: 25px;
32 background-color: lightblue;
33 margin: 0;
36 input[type="range"]::-webkit-slider-thumb {
37 -webkit-appearance: none;
39 </style>
40 <p>
41 The blue borders should coincide with light blue squares, like this:
42 <span style="display: inline-block; background-color: lightblue; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
43 There should be none of this:
44 <span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
45 or this:
46 <span style="display: inline-block; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
47 </p>
48 <div class="columns" id="t1">
49 <br>x y z
50 </div>
52 <div class="columns">
53 <br><span id="t2">x y z</span>
54 </div>
56 <div class="columns">
57 <br><div id="t3">x y z</div>
58 </div>
60 <div class="columns">
61 <br><div id="t4"><br>y z</div>
62 </div>
64 <div class="columns">
65 <br><div><br><input id="t5" type="range"></div>
66 </div>
68 <div class="columns">
69 <br><div><br><img id="t6" style="width: 25px; height: 25px; background-color: lightblue;"></div>
70 </div>
72 <p>
73 Except here, where the blue border should be around the bigger slice of the blue square, on the right.
74 </p>
76 <div class="columns">
77 <div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
78 </div>
80 <script>
81 function placeMarker(clientRect)
83 var marker = document.body.appendChild(document.createElement("div"));
84 marker.className = "marker";
85 marker.style.left = clientRect.left + "px";
86 marker.style.top = clientRect.top + "px";
87 marker.style.width = clientRect.width + "px";
88 marker.style.height = clientRect.height + "px";
91 function placeMarkersForRange(range, startOffset)
93 if (startOffset === undefined)
94 startOffset = 0;
96 var clientRects = range.getClientRects();
97 for (var i = startOffset; i < clientRects.length; ++i)
98 placeMarker(clientRects[i]);
101 var range = document.createRange();
103 var textNode = document.getElementById("t1").firstChild.nextSibling.nextSibling;
104 range.setStart(textNode, 0);
105 range.setEnd(textNode, 5);
106 placeMarkersForRange(range);
108 textNode = document.getElementById("t2").firstChild;
109 range.setStart(textNode, 0);
110 range.setEnd(textNode, 5);
111 placeMarkersForRange(range);
113 textNode = document.getElementById("t3").firstChild;
114 range.setStart(textNode, 0);
115 range.setEnd(textNode, 5);
116 placeMarkersForRange(range);
118 var block = document.getElementById("t4");
119 range.selectNode(block);
120 placeMarkersForRange(range, 1);
122 var slider = document.getElementById("t5");
123 range.selectNode(slider);
124 placeMarkersForRange(range);
126 var image = document.getElementById("t6");
127 range.selectNode(image);
128 placeMarkersForRange(range);
130 var div = document.getElementById("t7");
131 range.selectNode(div);
132 placeMarkersForRange(div);
133 </script>