mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[FIX] qweb: properly supports svg
Snabbdom supports svg, but it adds the namespace at the creation of the virtual node. However, owl works slightly differently: it adds children after creating the parent virtual node. So, we need to actually call the addNS method after the children nodes have been created. As a bonus, this is slightly faster than snabbdom: we only check at template compilation time once if a node is a svg.
This commit is contained in:
@@ -676,6 +676,31 @@ exports[`misc global 1`] = `
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`properly support svg add proper namespace to svg 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let utils = this.constructor.utils;
|
||||
var h = this.h;
|
||||
var _1 = '100px';
|
||||
var _2 = '90px';
|
||||
let c3 = [], p3 = {key:3,attrs:{width: _1,height: _2}};
|
||||
var vn3 = h('svg', p3, c3);
|
||||
result = vn3;
|
||||
var _4 = '50';
|
||||
var _5 = '50';
|
||||
var _6 = '4';
|
||||
var _7 = 'green';
|
||||
var _8 = '1';
|
||||
var _9 = 'yellow';
|
||||
let c10 = [], p10 = {key:10,attrs:{cx: _4,cy: _5,r: _6,stroke: _7,\\"stroke-width\\": _8,fill: _9}};
|
||||
var vn10 = h('circle', p10, c10);
|
||||
c3.push(vn10);
|
||||
c3.push({text: \` \`});
|
||||
utils.addNameSpace(vn3);
|
||||
return vn3;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`special cases for some boolean html attributes/properties input type= checkbox, with t-att-checked 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
|
||||
@@ -1312,3 +1312,10 @@ describe("global template registration", () => {
|
||||
expect((vnode as any).children[0].text).toBe("global");
|
||||
});
|
||||
});
|
||||
|
||||
describe("properly support svg", () => {
|
||||
test("add proper namespace to svg", () => {
|
||||
qweb.addTemplate("test", `<svg width="100px" height="90px"><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"/> </svg>`);
|
||||
expect(renderToString(qweb, "test")).toBe(`<svg width=\"100px\" height=\"90px\"><circle cx=\"50\" cy=\"50\" r=\"4\" stroke=\"green\" stroke-width=\"1\" fill=\"yellow\"></circle> </svg>`);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user