67 lines
2.1 KiB
HTML
67 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<title>baseVal in symbol and other display:none</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<link rel="help" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength"/>
|
|
<link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGAnimatedLength__baseVal"/>
|
|
<svg width="0" height="0">
|
|
<svg width="600" height="400" font-size="5">
|
|
<symbol width="40em" height="20em">
|
|
<g font-size="10px">
|
|
<rect id="r1" x="5em" y="6em" width="20%" height="30%" />
|
|
<circle id="c1" cx="5em" cy="6em" r="10em" />
|
|
</g>
|
|
</symbol>
|
|
<g font-size="10px" style="display:none">
|
|
<rect id="r2" x="5em" y="6em" width="20%" height="30%" />
|
|
<circle id="c2" cx="5em" cy="6em" r="10em" />
|
|
</g>
|
|
</svg>
|
|
</svg>
|
|
<script>
|
|
let r1 = document.getElementById("r1"),
|
|
c1 = document.getElementById("c1"),
|
|
r2 = document.getElementById("r2"),
|
|
c2 = document.getElementById("c2");
|
|
|
|
const assertBaseVal = (length, expected, info) => {
|
|
assert_equals(length.baseVal.value, expected, info);
|
|
};
|
|
|
|
let tEm = async_test("With em");
|
|
let tEmDone = tEm.step_func_done(() => {
|
|
assertBaseVal(r1.x, 50, "r1.x");
|
|
assertBaseVal(r1.y, 60, "r1.y");
|
|
assertBaseVal(c1.cx, 50, "c1.cx");
|
|
assertBaseVal(c1.cy, 60, "c1.cy");
|
|
assertBaseVal(c1.r, 100, "c1.r");
|
|
|
|
assertBaseVal(r2.x, 50, "r2.x");
|
|
assertBaseVal(r2.y, 60, "r2.y");
|
|
assertBaseVal(c2.cx, 50, "c2.cx");
|
|
assertBaseVal(c2.cy, 60, "c2.cy");
|
|
assertBaseVal(c2.r, 100, "c2.r");
|
|
});
|
|
|
|
let tEmPercentage = async_test("With em and percentage");
|
|
let tEmPercentageDone = tEmPercentage.step_func_done(() => {
|
|
assertBaseVal(r1.width, 120, "r1.width");
|
|
assertBaseVal(r1.height, 120, "r1.height");
|
|
|
|
assertBaseVal(r2.width, 120, "r2.width");
|
|
assertBaseVal(r2.height, 120, "r2.height");
|
|
});
|
|
|
|
const main = () => {
|
|
window.requestAnimationFrame(() => {
|
|
tEmDone();
|
|
tEmPercentageDone();
|
|
});
|
|
};
|
|
|
|
if (document.readyState === "complete") {
|
|
main();
|
|
} else {
|
|
window.addEventListener("load", main);
|
|
}
|
|
</script>
|