Skip to content

Commit

Permalink
Account for CSS zoom in SVG lengths.
Browse files Browse the repository at this point in the history
Ugh

Differential Revision: https://phabricator.services.mozilla.com/D212156

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1899695
gecko-commit: 45f1be7d15142b81f1dbf0b8e52e34f68d2cc412
gecko-reviewers: longsonr
  • Loading branch information
emilio authored and moz-wptsync-bot committed Jun 2, 2024
1 parent 17375f4 commit 82df32a
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 0 deletions.
27 changes: 27 additions & 0 deletions css/css-viewport/zoom/svg-ref.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!doctype html>
<style>
body { margin: 0 }
:root {
font-size: 10px;
}
.container {
font-size: 20px;
}
line {
stroke-width: 40px;
stroke: lime;
}
svg {
background-color: red;
}
</style>
<div class="container">
<svg width=400 height=400>
<rect width=400 height=400 fill="blue"/>
<line y1=0 y2=0 x1=0 x2=200 />
<line y1=40 y2=40 x1=0 x2=10em />
<line y1=80 y2=80 x1=0 x2=20rem />
<line y1=120 y2=120 x1=0 x2=50% />
<line y1=160 y2=160 x1=0 x2=4vw />
</svg>
</div>
39 changes: 39 additions & 0 deletions css/css-viewport/zoom/svg.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!doctype html>
<meta charset="utf-8">
<link rel="author" href="mailto:[email protected]" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1899695">
<link rel="match" href="svg-ref.html">
<style>
:root {
font-size: 10px;
zoom: 2;
}
body { margin: 0 }
.container {
font-size: 20px;
}
.child {
zoom: 2;
}
line {
stroke-width: 10px;
stroke: lime;
}
svg {
background-color: red;
}
</style>
<div class="container">
<div class="child">
<svg width=100 height=100>
<rect width=10rem height=100 fill="blue"/>
<line y1=0 y2=0 x1=0 x2=50 />
<line y1=10 y2=10 x1=0 x2=2.5em />
<line y1=20 y2=20 x1=0 x2=5rem />
<line y1=30 y2=30 x1=0 x2=50% />
<line y1=40 y2=40 x1=0 x2=1vw />
</svg>
</div>
</div>

0 comments on commit 82df32a

Please sign in to comment.