Ticket #1271: collapsed_select_test.html

File collapsed_select_test.html, 2.2 KB (added by Frederico Caldeira Knabben, 13 years ago)

TC. Changed it to make it easier to see the whitespace issue.

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4        <title>Collapsed Element Selection</title>
5        <script type="text/javascript">
6
7// The code inside window.onload has nothing to do with the issue,
8// so it can be ignored.
9window.onload = function()
10{
11        document.designMode = 'on' ;
12       
13        // For Safari and Opera, we must ensure the focus.
14        if ( (/safari/i).test( navigator.userAgent ) )
15                document.documentElement.focus() ;              // Safari
16        else
17                window.focus() ;                                                // Opera.               
18
19        MoveSelection() ;
20}
21
22// Here is the function to be analyzed.
23function MoveSelection()
24{
25        // Get our target empty element.
26        var el = document.getElementsByTagName( 'b' )[0] ;
27       
28        // This is the hack for Firefox and Opera to make the cursor blinking
29        // properly inside the empty element. It would be ok if it would work for
30        // Safari too, but ideally it should not be needed.
31        el.appendChild( document.createTextNode('') ) ;
32
33        // Create a range inside the element.
34        var range = document.createRange() ;
35        range.setStart( el, 0 ) ;
36        range.setEnd( el, 0 ) ;
37
38        // Move the selection to the range.
39        var selection = window.getSelection() ;
40        selection.removeAllRanges() ;
41        selection.addRange( range ) ;
42}
43
44        </script>
45</head>
46<body>
47        <h1>
48                Selection inside empty element
49        </h1>
50        <p>
51                This is an editable document. When loading this page, the caret should be blinking
52                inside the following brackets. Start typing. The text must be <strong>bold</strong>.
53        </p>
54        <p>
55                [<b></b>]<br />
56                [<b></b>]
57        </p>
58        <hr />
59        <p>
60                An important aspect to consider is that, if you don't type anything when loading
61                the page, but instead use the keyboard to change the caret position, there should
62                be no way to move inside the empty element again with the mouse or the keyboard,
63                which means that it will remain empty forever. This is the desired behavior.
64        </p>
65        <p>
66                This page is not intended to be compatible with IE, as there are several hacks to
67                make it work there. It should instead work properly with Firefox, Opera and Safari.
68        </p>
69</body>
70</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy