[FIX] qweb: improved svg support for components

If we want to generate dynamically svg components, it is useful to be
able to define components with a <g> tag as root, and then getting the
correct namespace.

closes #302
This commit is contained in:
Géry Debongnie
2019-09-26 15:19:45 +02:00
parent ecf12f6eee
commit 4513e3f31c
6 changed files with 91 additions and 18 deletions
@@ -676,6 +676,29 @@ exports[`misc global 1`] = `
}"
`;
exports[`properly support svg add proper namespace to g tags 1`] = `
"function anonymous(context,extra
) {
let utils = this.constructor.utils;
var h = this.h;
let c1 = [], p1 = {key:1};
var vn1 = h('g', p1, c1);
result = vn1;
var _2 = '50';
var _3 = '50';
var _4 = '4';
var _5 = 'green';
var _6 = '1';
var _7 = 'yellow';
let c8 = [], p8 = {key:8,attrs:{cx: _2,cy: _3,r: _4,stroke: _5,\\"stroke-width\\": _6,fill: _7}};
var vn8 = h('circle', p8, c8);
c1.push(vn8);
c1.push({text: \` \`});
utils.addNameSpace(vn1);
return vn1;
}"
`;
exports[`properly support svg add proper namespace to svg 1`] = `
"function anonymous(context,extra
) {
+18 -2
View File
@@ -1315,7 +1315,23 @@ describe("global template registration", () => {
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>`);
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>`
);
});
test("add proper namespace to g tags", () => {
// this is necessary if one wants to use components in a svg
qweb.addTemplate(
"test",
`<g><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"/> </g>`
);
expect(renderToString(qweb, "test")).toBe(
`<g><circle cx=\"50\" cy=\"50\" r=\"4\" stroke=\"green\" stroke-width=\"1\" fill=\"yellow\"></circle> </g>`
);
});
});