Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-viewport/zoom/svg-font-relative-units.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8">
<link rel="match" href="svg-font-relative-units-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
:root {
font: 10px/1 Ahem;
zoom: 2;
}
body { margin: 0 }
.container {
font-size: 20px;
}
.child {
zoom: 2;
}
line {
stroke-width: 2px;
stroke: lime;
}
svg {
background-color: black;
}
</style>
<div class="container">
<div class="child">
<svg width=100 height=100>
<!-- Font-relative units -->
<line y1=10 y2=10 x1=0 x2=1em />
<line y1=30 y2=30 x1=0 x2=1ch />
<line y1=35 y2=35 x1=0 x2=1ic />
<!-- Root font-relative units -->
<line y1=55 y2=55 x1=0 x2=1rch />
<line y1=60 y2=60 x1=0 x2=1rem />
<line y1=70 y2=70 x1=0 x2=1ric />
<line y1=75 y2=75 x1=0 x2=1rlh />
</svg>
</div>
</div>