-
Notifications
You must be signed in to change notification settings - Fork 0
/
extraClientRects.html
61 lines (51 loc) · 1.58 KB
/
extraClientRects.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html>
<head>
<title>Webkit: Selection Range has Extra ClientRects at the end/beginning of some lines</title>
<style>
p {
width: 200px;
background-color: #E3E3E3;
font-family: monospace;
font-size: 40px;
}
.pass {
color: green;
}
.fail {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Webkit: Selection Range has Extra ClientRects at the end/beginning of some lines</h1>
<h3>Steps to reproduce:</h3>
<ol>
<li>Open in Safari/Chrome</li>
<li>Click the 'C' in the contenteditable region</li>
<li>Tap the <code>RIGHT</code> keyboard arrow key repeatedly to move the caret through the text</li>
<li>Notice when the caret is at the end of a line the ClientRects length is 2 (doesn't happen on the last line)</li>
<li>Notice when the caret is at the start of a line the ClientRects length is 2 (doesn't happen on the first line)</li>
</ol>
<p id="input" contenteditable="true">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
<div id="output"></div>
<script type="text/javascript">
document.addEventListener( 'keyup', function ( event ){
var input = document.getElementById( 'input' );
var output = document.getElementById( 'output' );
var selection = window.getSelection();
if ( selection.rangeCount > 0 ){
var className = 'pass';
var range = selection.getRangeAt( 0 );
var clientRects = range.getClientRects();
var length = clientRects.length;
if ( length == 2 ){
className = 'fail';
}
output.innerHTML = '<span class="' + className + '">ClientRects.length: ' + length + '</span>';
console.log( 'ClientRects.length:', length );
}
});
</script>
</body>
</html>