Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!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">
<svg id="mySVG"></svg>
</div>
<script>
let svgElem = document.getElementById("mySVG");
function expect_svg_width_and_height(width, height) {
let rect = svgElem.getBoundingClientRect();
assert_equals(rect.width, width, "checking width.");
assert_equals(rect.height, height, "checking height.");
}
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>