Skip to content

Commit

Permalink
fix(mock-doc): allow urls as css values (#2857)
Browse files Browse the repository at this point in the history
css values such as `background-image: (https://mydomain.com/image.jpg)`
currently lose values after the second colon. This ensures the entire value 
is taken into account when a url is specified.
  • Loading branch information
scaredcat authored Dec 7, 2021
1 parent c7b07c6 commit 6faa5f2
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/mock-doc/css-style-declaration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export class MockCSSStyleDeclaration {
const splt = rule.split(':');
if (splt.length > 1) {
const prop = splt[0].trim();
const value = splt[1].trim();
const value = splt.slice(1).join(':').trim();
if (prop !== '' && value !== '') {
this._styles.set(jsCaseToCssCase(prop), value);
}
Expand Down
32 changes: 32 additions & 0 deletions src/mock-doc/test/css-style-declaration.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { MockCSSStyleDeclaration } from '../css-style-declaration';
import { MockDocument } from '../document';
import { MockHTMLElement } from '../node';

describe('css-style-declaration', () => {
let doc: MockDocument;
beforeEach(() => {
doc = new MockDocument();
});

it('should set attributes correctly', () => {
const cssAttr = new MockCSSStyleDeclaration();
cssAttr.cssText = 'color: red';

expect(cssAttr.cssText).toBe('color: red;');
});

it('should handle attributes containing colons', () => {
const cssAttr = new MockCSSStyleDeclaration();
cssAttr.cssText = 'background-image: (https://ionic.io/img/ionic-io-og-img.png);';

expect(cssAttr.cssText).toBe('background-image: (https://ionic.io/img/ionic-io-og-img.png);');
});

it('should set styles on html elements', () => {
const element = new MockHTMLElement(doc, 'div');
element.style = 'color: red; font-family: "My Custom Font"';

expect(element.style.cssText).toEqual('color: red; font-family: "My Custom Font";');
expect(element.style.cssText).toEqual(element.getAttribute('style'));
});
});

0 comments on commit 6faa5f2

Please sign in to comment.