NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] svg namespace support

Browse Source
This commit is contained in:
Bruno Boi
2021-11-19 11:31:04 +01:00
committed by Aaron Bohy
parent 093218a067
commit 5d4a38ad0f
8 changed files with 310 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/blockdom/namespace.test.ts
+72
View File
@@ -0,0 +1,72 @@
import { createBlock, mount } from "../../src/blockdom";
import { makeTestFixture } from "./helpers";
//------------------------------------------------------------------------------
// Setup and helpers
//------------------------------------------------------------------------------
const XHTML_URI = "http://www.w3.org/1999/xhtml";
const SVG_URI = "http://www.w3.org/2000/svg";
let fixture: HTMLElement;
beforeEach(() => {
fixture = makeTestFixture();
});
afterEach(() => {
fixture.remove();
});
//------------------------------------------------------------------------------
// Tests
//------------------------------------------------------------------------------
describe("namespace", () => {
test("default namespace is xhtml", () => {
const block = createBlock(`<tag/>`);
const tree = block();
mount(tree, fixture);
expect(fixture.innerHTML).toBe("<tag></tag>");
expect(fixture.firstElementChild!.namespaceURI).toBe(XHTML_URI);
});
test("namespace can be changed with block-ns", () => {
const block = createBlock(`<tag block-ns="${SVG_URI}"/>`);
const tree = block();
mount(tree, fixture);
expect(fixture.innerHTML).toBe("<tag></tag>");
expect(fixture.firstElementChild!.namespaceURI).toBe(SVG_URI);
});
test("namespace is kept for children", () => {
const block = createBlock(
`<parent block-ns="${SVG_URI}"><child><subchild/></child><child/></parent>`
);
const tree = block();
mount(tree, fixture);
expect(fixture.innerHTML).toBe(
"<parent><child><subchild></subchild></child><child></child></parent>"
);
const parent = fixture.firstElementChild!;
const child1 = parent.firstElementChild!;
const subchild = child1.firstElementChild!;
const child2 = child1.nextElementSibling!;
expect(parent.namespaceURI).toBe(SVG_URI);
expect(child1.namespaceURI).toBe(SVG_URI);
expect(child2.namespaceURI).toBe(SVG_URI);
expect(subchild.namespaceURI).toBe(SVG_URI);
});
test("various namespaces in same block", () => {
const block = createBlock(`<none><one block-ns="one"/><two block-ns="two"/></none>`);
const tree = block();
mount(tree, fixture);
expect(fixture.innerHTML).toBe("<none><one></one><two></two></none>");
const none = fixture.firstElementChild!;
const one = none.firstElementChild!;
const two = one.nextElementSibling!;
expect(none.namespaceURI).toBe(XHTML_URI);
expect(one.namespaceURI).toBe("one");
expect(two.namespaceURI).toBe("two");
});
});
tests/compiler/__snapshots__/svg.test.ts.snap
+57
View File
@@ -0,0 +1,57 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`properly support svg add proper namespace to g tags 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </g>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
exports[`properly support svg add proper namespace to svg 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\" width=\\"100px\\" height=\\"90px\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </svg>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
exports[`properly support svg namespace to g tags not added if already in svg namespace 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><g/></svg>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
exports[`properly support svg namespace to svg tags added even if already in svg namespace 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><svg block-ns=\\"http://www.w3.org/2000/svg\\"/></svg>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
tests/compiler/parser.test.ts
+118 -1
View File
@@ -46,6 +46,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
});
});
@@ -73,6 +74,7 @@ describe("qweb parser", () => {
ref: null,
model: null,
content: [],
ns: null,
});
});
@@ -86,6 +88,7 @@ describe("qweb parser", () => {
ref: null,
model: null,
content: [{ type: ASTType.Text, value: "some text" }],
ns: null,
});
});
@@ -98,6 +101,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [
{ type: ASTType.Text, value: "some text" },
{
@@ -108,6 +112,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.Text, value: "inside" }],
},
],
@@ -126,6 +131,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [],
},
{
@@ -136,6 +142,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [],
},
],
@@ -155,6 +162,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [],
},
],
@@ -170,10 +178,83 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.Text, value: "foo" }],
});
});
test("svg dom node", async () => {
expect(
parse(
`<svg width="100px" height="90px"><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"/></svg>`
)
).toEqual({
attrs: {
height: "90px",
width: "100px",
},
content: [
{
attrs: {
cx: "50",
cy: "50",
fill: "yellow",
r: "4",
stroke: "green",
"stroke-width": "1",
},
content: [],
dynamicTag: null,
model: null,
ns: null,
on: {},
ref: null,
tag: "circle",
type: 2,
},
],
dynamicTag: null,
model: null,
ns: "http://www.w3.org/2000/svg",
on: {},
ref: null,
tag: "svg",
type: 2,
});
expect(
parse(`<g><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"/></g>`)
).toEqual({
attrs: {},
content: [
{
attrs: {
cx: "50",
cy: "50",
fill: "yellow",
r: "4",
stroke: "green",
"stroke-width": "1",
},
content: [],
dynamicTag: null,
model: null,
ns: null,
on: {},
ref: null,
tag: "circle",
type: 2,
},
],
dynamicTag: null,
model: null,
ns: "http://www.w3.org/2000/svg",
on: {},
ref: null,
tag: "g",
type: 2,
});
});
// ---------------------------------------------------------------------------
// t-esc
// ---------------------------------------------------------------------------
@@ -200,6 +281,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.TEsc, expr: "text", defaultValue: "" }],
});
});
@@ -221,6 +303,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.TEsc, expr: "text", defaultValue: "hey" }],
});
});
@@ -262,6 +345,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.TOut, expr: "text", body: null }],
});
});
@@ -275,6 +359,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [
{ type: ASTType.TOut, expr: "text", body: [{ type: ASTType.Text, value: "body" }] },
],
@@ -294,6 +379,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [
{
type: ASTType.TIf,
@@ -321,6 +407,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.Text, value: "hey" }],
},
tElif: null,
@@ -397,6 +484,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [
{
type: ASTType.Text,
@@ -415,6 +503,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.Text, value: "elif" }],
},
},
@@ -427,6 +516,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [
{
type: ASTType.Text,
@@ -474,6 +564,7 @@ describe("qweb parser", () => {
dynamicTag: null,
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.Text, value: "ok" }],
},
],
@@ -493,6 +584,7 @@ describe("qweb parser", () => {
dynamicTag: null,
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.Text, value: "ok" }],
},
{ type: ASTType.Text, value: "abc" },
@@ -527,6 +619,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [
{
type: ASTType.TIf,
@@ -601,6 +694,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.TEsc, expr: "item", defaultValue: "" }],
},
memo: "",
@@ -646,6 +740,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.TEsc, expr: "item", defaultValue: "" }],
},
memo: "",
@@ -681,6 +776,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.TEsc, expr: "item", defaultValue: "" }],
},
},
@@ -715,6 +811,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.TEsc, expr: "category.name", defaultValue: "" }],
},
memo: "",
@@ -736,6 +833,7 @@ describe("qweb parser", () => {
model: null,
tag: "div",
dynamicTag: null,
ns: null,
content: [
{
type: ASTType.TForEach,
@@ -781,6 +879,7 @@ describe("qweb parser", () => {
ref: null,
model: null,
attrs: {},
ns: null,
content: [{ type: ASTType.TEsc, expr: "item", defaultValue: "" }],
},
memo: "",
@@ -888,6 +987,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [
{
type: ASTType.TCall,
@@ -925,6 +1025,7 @@ describe("qweb parser", () => {
on: { click: "add" },
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.Text, value: "Click" }],
});
});
@@ -1003,6 +1104,7 @@ describe("qweb parser", () => {
ref: null,
model: null,
on: {},
ns: null,
},
{
type: ASTType.DomNode,
@@ -1013,6 +1115,7 @@ describe("qweb parser", () => {
ref: null,
model: null,
on: {},
ns: null,
},
],
},
@@ -1203,6 +1306,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.Text, value: "hey" }],
},
});
@@ -1220,6 +1324,7 @@ describe("qweb parser", () => {
on: {},
ref: null,
model: null,
ns: null,
content: [{ type: ASTType.Text, value: "hey" }],
},
});
@@ -1238,6 +1343,7 @@ describe("qweb parser", () => {
on: {},
ref: "name",
model: null,
ns: null,
content: [{ type: ASTType.Text, value: "hey" }],
});
});
@@ -1251,6 +1357,7 @@ describe("qweb parser", () => {
on: {},
ref: "name",
model: null,
ns: null,
content: [
{ type: ASTType.TOut, expr: "text", body: [{ type: ASTType.Text, value: "body" }] },
],
@@ -1266,6 +1373,7 @@ describe("qweb parser", () => {
on: {},
ref: "name",
model: null,
ns: null,
content: [{ type: ASTType.TEsc, expr: "text", defaultValue: "body" }],
});
});
@@ -1309,7 +1417,8 @@ describe("qweb parser", () => {
model: null,
tag: "div",
dynamicTag: null,
type: 2,
type: ASTType.DomNode,
ns: null,
},
type: 16,
},
@@ -1339,6 +1448,7 @@ describe("qweb parser", () => {
ref: null,
tag: "input",
dynamicTag: null,
ns: null,
model: {
baseExpr: "state",
expr: "'stuff'",
@@ -1357,6 +1467,7 @@ describe("qweb parser", () => {
ref: null,
tag: "input",
dynamicTag: null,
ns: null,
model: {
baseExpr: "state",
expr: "'stuff'",
@@ -1375,6 +1486,7 @@ describe("qweb parser", () => {
ref: null,
tag: "input",
dynamicTag: null,
ns: null,
model: {
baseExpr: "state",
expr: "'stuff'",
@@ -1394,6 +1506,7 @@ describe("qweb parser", () => {
ref: null,
tag: "textarea",
dynamicTag: null,
ns: null,
model: {
baseExpr: "state",
expr: "'stuff'",
@@ -1412,6 +1525,7 @@ describe("qweb parser", () => {
ref: null,
tag: "input",
dynamicTag: null,
ns: null,
model: {
baseExpr: "state",
expr: "'stuff'",
@@ -1430,6 +1544,7 @@ describe("qweb parser", () => {
ref: null,
tag: "input",
dynamicTag: null,
ns: null,
model: {
baseExpr: "state",
expr: "'stuff'",
@@ -1448,6 +1563,7 @@ describe("qweb parser", () => {
ref: null,
tag: "input",
dynamicTag: null,
ns: null,
model: {
baseExpr: "state",
expr: "'stuff'",
@@ -1472,6 +1588,7 @@ describe("qweb parser", () => {
tag: "div",
dynamicTag: "theTag",
model: null,
ns: null,
});
});
});
tests/compiler/svg.test.ts
+25 -17
View File
@@ -1,22 +1,30 @@
import { renderToString, snapshotEverything } from "../helpers";
// NB: check the snapshots to see where the SVG namespaces are added
snapshotEverything();
describe("properly support svg", () => {
test.skip("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>`
// );
test("add proper namespace to svg", () => {
const template = `<svg width="100px" height="90px"><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"/> </svg>`;
expect(renderToString(template)).toBe(
`<svg width=\"100px\" height=\"90px\"><circle cx=\"50\" cy=\"50\" r=\"4\" stroke=\"green\" stroke-width=\"1\" fill=\"yellow\"></circle> </svg>`
);
});
test.skip("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>`
// );
test("add proper namespace to g tags", () => {
const template = `<g><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"/> </g>`;
expect(renderToString(template)).toBe(
`<g><circle cx=\"50\" cy=\"50\" r=\"4\" stroke=\"green\" stroke-width=\"1\" fill=\"yellow\"></circle> </g>`
);
});
test("namespace to g tags not added if already in svg namespace", () => {
const template = `<svg><g/></svg>`;
expect(renderToString(template)).toBe(`<svg><g></g></svg>`);
});
test("namespace to svg tags added even if already in svg namespace", () => {
const template = `<svg><svg/></svg>`;
expect(renderToString(template)).toBe(`<svg><svg></svg></svg>`);
});
});
tests/components/__snapshots__/basics.test.ts.snap
+2 -2
View File
@@ -1192,7 +1192,7 @@ exports[`support svg components add proper namespace to svg 1`] = `
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let block1 = createBlock(\`<g><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/></g>\`);
let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/></g>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
@@ -1206,7 +1206,7 @@ exports[`support svg components add proper namespace to svg 2`] = `
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let block1 = createBlock(\`<svg><block-child-0/></svg>\`);
let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`GComp\`, {}, key + \`__1\`, node, ctx);