Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /svg/coordinate-systems/outer-svg-intrinsic-size-002.html - WPT Dashboard Interop Dashboard
<!doctype HTML>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#wrapper {
width: 500px;
}
</style>
</head>
<body>
<div id="wrapper">
<object id="myObj" data="support/simple.svg"
onload="go()"></object>
</div>
<script>
let objElem = document.getElementById("myObj");
let svgElem; // initialized after obj doc loads
function expect_svg_width_and_height(width, height) {
let rect = objElem.getBoundingClientRect();
assert_equals(rect.width, width, "checking width.");
assert_equals(rect.height, height, "checking height.");
}
function go() {
svgElem = objElem.contentDocument.documentElement;
test(function() {
expect_svg_width_and_height(300, 150);
}, "no sizing attributes set");
// Just setting width and/or height:
test(function() {
svgElem.setAttribute("width", "100");
expect_svg_width_and_height(100, 150);
}, "specified width");
test(function() {
svgElem.setAttribute("width", "400");
expect_svg_width_and_height(400, 150);
}, "modified specified width");
test(function() {
// (set height, leaving width still set)
svgElem.setAttribute("height", "100");
expect_svg_width_and_height(400, 100);
}, "specified width and height");
test(function() {
svgElem.setAttribute("height", "200");
expect_svg_width_and_height(400, 200);
}, "specified width and modified specified height");
test(function() {
svgElem.removeAttribute("width"); // leaving only 'height':
expect_svg_width_and_height(300, 200);
}, "specified height");
test(function() {
svgElem.setAttribute("height", "250");
expect_svg_width_and_height(300, 250);
}, "modified specified height");
test(function() {
// clean up (go back to having no sizing attrs set)
svgElem.removeAttribute("height");
expect_svg_width_and_height(300, 150);
}, "no specified sizing attrs (after setting & removing them)");
// Just setting viewBox:
test(function() {
svgElem.setAttribute("viewBox", "0 0 10 8");
expect_svg_width_and_height(500, 400);
}, "set a 10x8 viewBox");
test(function() {
// Adjusting already-set viewBox:
svgElem.setAttribute("viewBox", "0 0 50 10");
expect_svg_width_and_height(500, 100);
}, "modified viewBox to 50x20");
test(function() {
svgElem.setAttribute("width", "100");
expect_svg_width_and_height(100, 20);
}, "adding specified width, in presence of specified viewBox");
test(function() {
svgElem.setAttribute("viewBox", "0 0 40 30");
expect_svg_width_and_height(100, 75);
}, "modifiying specified viewBox, in presence of specified width");
test(function() {
svgElem.removeAttribute("width");
expect_svg_width_and_height(500, 375);
}, "removing specified width, in presence of specified viewBox");
test(function() {
svgElem.setAttribute("height", "60");
expect_svg_width_and_height(80, 60);
}, "adding specified height, in presence of specified viewBox");
test(function() {
svgElem.setAttribute("viewBox", "0 0 100 120");
expect_svg_width_and_height(50, 60);
}, "modifiying specified viewBox, in presence of specified height");
};
</script>
</body>