<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>foreignObject can be transformed</title>
<style type="text/css">
p, div { color: navy; margin: 0; }
.test { fill: lightgray; font-size: 10px; }
.control { position: relative; left: 10px; top: 10px; width: 390px; height: 110px; background: lightgray; font-size: 100px; }
.controlText { font-size: 100px; }
</style>
</head>
<body>
<p>The word "TEST " should appear twice below, the same size each time.</p>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="120" class="test">
<rect x="1" y="1" width="60" height="12" transform="scale(10)"/>
<foreignObject x="1" y="1" width="60" height="10" transform="scale(10)">
<div xmlns="http://www.w3.org/1999/xhtml"> TEST </div>
</foreignObject>
</svg>
<div class="control">
<div class="controlText">TEST</div>
</div>
<script>
if (window.testRunner)
testRunner.dumpSelectionRect();
var range = document.createRange();
range.selectNode(window.document.documentElement);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
</script>
</body>
</html>
Codebase Browser
chromium