Ticket #11180: webkit_blink_select_all.html

File webkit_blink_select_all.html, 2.3 KB (added by Olek Nowodziński, 7 years ago)

Sample to reproduce the issue in native contenteditable

Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <title>Broken select all with non-editable block as first/last child of contenteditable</title>
5        <meta charset="utf-8">
6        <style>
7                body {
8                        width: 960px;
9                        margin: 0 auto;
10                }
11
12                h2 {
13                        font-weight: normal;
14                }
15
16                button {
17                        width: 100%;
18                        padding: 10px;
19                        font-size: 1.2em;
20                        /*position: fixed; bottom: 0; right: 0; */
21                }
22
23                [contenteditable=true] {
24                        outline: 2px solid black;
25                        padding: 10px;
26                }
27
28                [contenteditable=false] {
29                        background: purple;
30                        color: #fff;
31                }
32        </style>
33</head>
34<body>
35        <h1>Select all is broken when non-editable block is first/last child of <code>contenteditable</code></h1>
36        <ol>
37                <li>Focus <code>contenteditable</code>. Put caret in editable paragraph (i.e. at "^").</li>
38                <li>Press CTRL+A</li>
39                <li>Nothing is selected: collapsed selection opposite to the non-editable block.</li>
40        </ol>
41
42        Alternatively:
43        <ol>
44                <li>Focus <code>contenteditable</code>. Put caret in editable paragraph (i.e. at "^").</li>
45                <li>Press the button in the bottom to <code>execCommand( 'SelectAll' )</code></li>
46                <li>Nothing is selected: collapsed selection opposite to the non-editable block.</li>
47        </ol>
48
49        <h2><span style="color: red">Broken</span>: Non-editable <strong>block as a first-child</strong> of contenteditable</h2>
50        <div contenteditable="true">
51                <div contenteditable="false">
52                        Non-editable div.
53                </div>
54                <p>Editable pa^ragraph.</p>
55        </div>
56
57        <h2><span style="color: red">Broken</span>: Non-editable <strong>block as a last-child</strong> of contenteditable</h2>
58        <div contenteditable="true">
59                <p>Edit^able paragraph.</p>
60                <div contenteditable="false">
61                        Non-editable div.
62                </div>
63        </div>
64
65        <h2><span style="color: green">Works</span>: Non-editable <strong>inline as a first-child</strong> of contenteditable</h2>
66        <div contenteditable="true">
67                <span contenteditable="false">
68                        Non-editable span.
69                </span>
70                <p>Editable paragr^aph.</p>
71        </div>
72
73        <h2><span style="color: green">Works</span>: Non-editable <strong>inline as a last-child</strong> of contenteditable</h2>
74        <div contenteditable="true">
75                <p>Editab^le paragraph.</p>
76                <span contenteditable="false">
77                        Non-editable span.
78                </span>
79        </div>
80
81        <br />
82
83        <button onclick="document.execCommand( 'SelectAll' )" type="button">
84                document.execCommand( 'SelectAll' )
85        </button>
86</body>
87</html>
© 2003 – 2021 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy