Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 8, 2016 23:03
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mbostock/590163 to your computer and use it in GitHub Desktop.
CSSOM/SVG Test
license: gpl-3.0

Test case for WebKit bug 46203.

getBBox() Returns the tight bounding box in current user space (i.e., after application of the 'transform' attribute, if any) on the geometry of all contained graphics elements, exclusive of stroking, clipping, masking and filter effects). Note that getBBox must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered. [SVG]

getClientRects() If the element does not have an associated CSS layout box and is in the http://www.w3.org/2000/svg namespace return a ClientRectList object containing a single ClientRect object that describes the bounding box of the element as defined by SVG specification. [CSSOM]

getBoundingClientRect() Otherwise, return a ClientRect object describing the smallest rectangle that includes the first rectangle in list and all of the remaining rectangles of which the height or width is not zero. [CSSOM]

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font: 14px Helvetica Neue;
text-rendering: optimizeLegibility;
}
div {
width: 960px;
margin: auto;
}
th {
font-family: Courier New;
text-align: right;
padding-left: 100px;
padding-right: 10px;
}
rect {
stroke: #000;
fill: #eee;
}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
var div = document.getElementById("div"),
svg = div.appendChild(create("svg")),
rect = svg.appendChild(create("rect"));
svg.setAttribute("width", 960);
svg.setAttribute("height", 400);
rect.setAttribute("x", "10%");
rect.setAttribute("y", "10%");
rect.setAttribute("width", "80%");
rect.setAttribute("height", "80%");
text("EXPECTED", {width: 768, height: 320});
text("getBBox()", svg.getBBox());
text("getBoundingClientRect()", svg.getBoundingClientRect());
text("getClientRects()[0]", svg.getClientRects()[0]);
function text(name, size) {
document.body.appendChild(document.createElement("tr"))
.appendChild(document.createElement("th"))
.appendChild(document.createTextNode(name))
.parentNode
.parentNode
.appendChild(document.createElement("td"))
.appendChild(document.createTextNode(size.width + " \xd7 " + size.height));
}
function create(type) {
return document.createElementNS("http://www.w3.org/2000/svg", type);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment