Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<html class="reftest-wait">
<title>transform-box: stroke-box, on group (&lt;g>), stroke on child mutated</title>
<link rel="match" href="reference/svgbox-rect-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/rendering-utils.js"></script>
<meta name="assert" content="This should display a rect whose center of rotation is at (20, 0) of its stroke-box."/>
<style>
#target {
transform-box: stroke-box;
transform-origin: 20px 0px;
transform: rotate(90deg);
}
#target > rect {
fill: green;
stroke: black;
stroke-width: 10;
}
</style>
<svg width="400" height="300">
<g id="target">
<rect width="100" height="50" x="100" y="100"/>
</g>
</svg>
<script>
waitForAtLeastOneFrame().then(() => {
document.querySelector('#target > rect').style.strokeWidth = '20px';
takeScreenshot();
});
</script>