Ticket #14451: 14451-2.patch

core/dom/element.js

@@ -2038 +2038 @@
         }
 
         function getContextualizedSelector( element, selector ) {
-                return '#' + element.$.id + ' ' + selector.split( /,\s*/ ).join( ', #' + element.$.id + ' ' );
+                return '#' + CSS.escape( element.$.id ) + ' ' + selector.split( /,\s*/ ).join( ', #' + CSS.escape( element.$.id ) + ' ' );
         }
 
         var sides = {

tests/plugins/image2/image2.html

@@ -99 +99 @@
                         <figcaption>caption1</figcaption>
                 </figure>
         </textarea>
+
+        <!-- numeric widget ID -->
+
+        <textarea id="editor_widget_numeric_id">
+                <p>x</p>
+                <figure class="image">
+                        <img src="_assets/foo.png" alt="foo" />
+                        <figcaption id="100">caption1</figcaption>
+                </figure>
+        </textarea>
 </body>
+ No newline at end of file

tests/plugins/image2/image2.js

@@ -405 +405 @@
                         '</figure>'
         } );
 
+        // --  numeric widget ID  -------------------------------------------------
+
+        tools.addTests( tcs, {
+                name: 'widget_numeric_id',
+                widgetName: 'image',
+                extraPlugins: 'image2',
+                extraAllowedContent: 'figcaption[id]',
+                editorConfig: alignClassesEditorConfig,
+                initialInstancesNumber: 1,
+                assertWidgets: function( editor ) {
+                        var figcaption = editor.document.getById( '100' );
+                        assert.isNotUndefined( figcaption, 'Figcaption with id 100 should exists' );
+                        assert.isNotNull( figcaption, 'Figcaption with id 100 shoul be non null element' );
+
+                        assertWidgetData( {
+                                align: 'none',
+                                src: '_assets/foo.png',
+                                alt: 'foo',
+                                width: '',
+                                height: '',
+                                hasCaption: true,
+                                figcaption: figcaption
+                        }, 'caption1' );
+                },
+                newData: newDialogData( {
+                        align: 'none',
+                        src: '_assets/bar.png',
+                        alt: 'bar',
+                        width: '200',
+                        height: '250',
+                        hasCaption: true
+                } ),
+                newWidgetPattern:
+                '<figure class="image">' +
+                        '<img alt="bar" height="250" src="_assets/bar.png" width="200" />' +
+                        '<figcaption>Caption</figcaption>' +
+                '</figure>'
+
+        } );
+
         bender.test( tcs );
 
         function assertWidgetData( data, caption ) {

core/dom/element.js

@@ -2038 +2038 @@
         }
 
         function getContextualizedSelector( element, selector ) {
-                return '#' + CSS.escape( element.$.id ) + ' ' + selector.split( /,\s*/ ).join( ', #' + CSS.escape( element.$.id ) + ' ' );
+                return '#' + CKEDITOR.tools.escapeCss( element.$.id ) + ' ' + selector.split( /,\s*/ ).join( ', #' + CKEDITOR.tools.escapeCss( element.$.id ) + ' ' );
         }
 
         var sides = {

core/tools.js

@@ -1353 +1353 @@
                         }
 
                         return token;
+                },
+
+                /**
+                 * Returns escaped CSS selector. CSS.escape() is used if defined, leading digit is escaped otherwise.
+                 *
+                 * @since 4.5.8
+                 * @param {String} selector
+         * @returns {String} escaped selector
+         */
+                escapeCss: function( selector ) {
+                        //invalid input
+                        if ( typeof selector === 'undefined' || selector === null || selector.length === 0 )
+                                return '';
+
+                        //CSS.escape() can be used
+                        if ( typeof CSS !== 'undefined' && typeof CSS.escape !== 'undefined' )
+                                return CSS.escape( selector );
+
+                        //simple leading digit escape
+                        if ( !isNaN( parseInt( selector.charAt( 0 ), 10 ) ) )
+                                return '\\3' + selector.charAt( 0 ) + ' ' + selector.substring( 1, selector.length );
+
+                        return selector;
                 }
         };
 

tests/core/tools.js

@@ -647 +647 @@
 
                         // Check if next token will be the same.
                         assert.areEqual( token, CKEDITOR.tools.getCsrfToken(), 'getCsrfToken returns token from cookie' );
+                },
+
+                'test escapeCss - invalid selector': function() {
+                        var selector;
+                        var escapedSelector = CKEDITOR.tools.escapeCss( selector );
+
+                        //check undefined selector
+                        assert.areSame( escapedSelector, '', 'invalid selector - undefined' );
+
+                        selector = null;
+                        escapedSelector = CKEDITOR.tools.escapeCss( selector );
+
+                        //check null selector
+                        assert.areSame( escapedSelector, '', 'invalid selector - null' );
+
+                        selector = '';
+                        escapedSelector = CKEDITOR.tools.escapeCss( selector );
+
+                        //check empty selector
+                        assert.areSame( escapedSelector, '', 'invalid selector - empty' );
+                },
+
+                'test escapeCss - starts-with-number selector': function() {
+                        var selector = '100';
+                        var escapedSelector = CKEDITOR.tools.escapeCss( selector );
+
+                        //check starts-with-number selector
+                        assert.areSame( escapedSelector, '\\31 00', 'starts-with-number selector' );
+
+                        selector = '0';
+                        escapedSelector = CKEDITOR.tools.escapeCss( selector );
+
+                        //check only-one-number selector
+                        assert.areSame( escapedSelector, '\\30 ', 'only-one-number selector' );
+                },
+
+                'test escapeCss - standard selector': function() {
+                        var selector = 'aaa';
+                        var escapedSelector = CKEDITOR.tools.escapeCss( selector );
+
+                        //check standard selector
+                        assert.areSame( escapedSelector, 'aaa', 'starts with number selector' );
                 }
         } );
 } )();