|
|
@@ -47,25 +47,25 @@ describe( 'IconView', () => {
|
|
|
|
|
|
describe( 'inline svg', () => {
|
|
|
it( 'should react to changes in view#content', () => {
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) ).to.equal( '' );
|
|
|
+ assertIconInnerHTML( view, '' );
|
|
|
|
|
|
view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) ).to.equal( '<g id="test"></g>' );
|
|
|
+ assertIconInnerHTML( view, '<g id="test"></g>' );
|
|
|
|
|
|
view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>';
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) ).to.equal( '' );
|
|
|
+ assertIconInnerHTML( view, '' );
|
|
|
} );
|
|
|
|
|
|
it( 'works for #content with more than <svg> declaration', () => {
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) ).to.equal( '' );
|
|
|
+ assertIconInnerHTML( view, '' );
|
|
|
|
|
|
view.content =
|
|
|
'<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) ).to.equal( '<g id="test"></g>' );
|
|
|
+ assertIconInnerHTML( view, '<g id="test"></g>' );
|
|
|
} );
|
|
|
|
|
|
it( 'should respect parsed <svg>\'s viewBox attribute', () => {
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) ).to.equal( '' );
|
|
|
+ assertIconInnerHTML( view, '' );
|
|
|
|
|
|
view.content = '<svg version="1.1" viewBox="10 20 30 40" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
|
|
|
expect( view.viewBox ).to.equal( '10 20 30 40' );
|
|
|
@@ -75,46 +75,62 @@ describe( 'IconView', () => {
|
|
|
describe( 'fill color', () => {
|
|
|
it( 'should be set intially based on view#fillColor', () => {
|
|
|
view.fillColor = 'red';
|
|
|
-
|
|
|
view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
|
|
|
- '<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path></svg>';
|
|
|
-
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) )
|
|
|
- .to.equal( '<path class="ck-icon__fill" style="fill:red"></path>' +
|
|
|
- '<path></path>' +
|
|
|
- '<path class="ck-icon__fill" style="fill:red"></path>' );
|
|
|
+ '<path class="ck-icon__fill"/>' +
|
|
|
+ '<path/>' +
|
|
|
+ '<path class="ck-icon__fill"/>' +
|
|
|
+ '</svg>';
|
|
|
+
|
|
|
+ expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' );
|
|
|
+ expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
|
|
|
+ expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' );
|
|
|
} );
|
|
|
|
|
|
it( 'should react to changes in view#fillColor', () => {
|
|
|
view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
|
|
|
- '<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path></svg>';
|
|
|
+ '<path class="ck-icon__fill"/>' +
|
|
|
+ '<path/>' +
|
|
|
+ '<path class="ck-icon__fill"/>' +
|
|
|
+ '</svg>';
|
|
|
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) )
|
|
|
- .to.equal( '<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path>' );
|
|
|
+ expect( view.element.children[ 0 ].style.fill ).to.equal( '' );
|
|
|
+ expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
|
|
|
+ expect( view.element.children[ 2 ].style.fill ).to.equal( '' );
|
|
|
|
|
|
view.fillColor = 'red';
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) )
|
|
|
- .to.equal( '<path class="ck-icon__fill" style="fill:red"></path>' +
|
|
|
- '<path></path>' +
|
|
|
- '<path class="ck-icon__fill" style="fill:red"></path>' );
|
|
|
+
|
|
|
+ expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' );
|
|
|
+ expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
|
|
|
+ expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' );
|
|
|
} );
|
|
|
|
|
|
it( 'should react to changes in view#content', () => {
|
|
|
view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
|
|
|
- '<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path></svg>';
|
|
|
+ '<path class="ck-icon__fill"/>' +
|
|
|
+ '<path/>' +
|
|
|
+ '<path class="ck-icon__fill"/>' +
|
|
|
+ '</svg>';
|
|
|
+
|
|
|
view.fillColor = 'red';
|
|
|
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) )
|
|
|
- .to.equal( '<path class="ck-icon__fill" style="fill:red"></path>' +
|
|
|
- '<path></path>' +
|
|
|
- '<path class="ck-icon__fill" style="fill:red"></path>' );
|
|
|
+ expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' );
|
|
|
+ expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
|
|
|
+ expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' );
|
|
|
|
|
|
view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
|
|
|
- '<path></path><path class="ck-icon__fill"></path></svg>';
|
|
|
+ '<path/>' +
|
|
|
+ '<path class="ck-icon__fill"/>' +
|
|
|
+ '</svg>';
|
|
|
|
|
|
- expect( normalizeHtml( view.element.innerHTML ) )
|
|
|
- .to.equal( '<path></path><path class="ck-icon__fill" style="fill:red"></path>' );
|
|
|
+ expect( view.element.children[ 0 ].style.fill ).to.equal( '' );
|
|
|
+ expect( view.element.children[ 1 ].style.fill ).to.equal( 'red' );
|
|
|
} );
|
|
|
} );
|
|
|
} );
|
|
|
} );
|
|
|
+
|
|
|
+function assertIconInnerHTML( icon, expected ) {
|
|
|
+ // Edge adds the xmlns attribute to each node when obtaining from parent's innerHTML.
|
|
|
+ expect( normalizeHtml( icon.element.innerHTML.replace( /xmlns="[^"]+"/, '' ) ) )
|
|
|
+ .to.equal( expected );
|
|
|
+}
|