On a <svg>, the width and height attributes not only set presentational hints, they can also set the natural sizes.
But what kind of things should be accepted for that purpose? Somewhat related to #12479
<!DOCTYPE html>
<style>
svg {
display: block;
border: solid;
width: auto; /* Avoid presentational hints */
height: auto;
margin: 5px;
}
</style>
<svg width ="100px"
height="100"></svg>
<svg width ="calc(100px)"
height="calc(100)"></svg>
<svg width ="attr(data-width px)" data-width ="100"
height="attr(data-height number)" data-height="100"></svg>
<svg width ="calc(sibling-index() * 25px)"
height="calc(sibling-index() * 25)"></svg>
<svg width="var(--width)"
height="var(--height)"
style="--width: 100px; --height: 100"></svg>
<script>
for (let svg of document.querySelectorAll("svg")) {
let width = svg.getAttribute("width");
let height = svg.getAttribute("height");
if (!CSS.supports("width", width) && !CSS.supports("scale", height)) {
svg.style.background = "red";
}
}
</script>
| Gecko Nightly |
Blink |
Webkit |
Servo with experimental features |
 |
 |
 |
 |
- Gecko: requires a number literal or a length literal.
- Blink: allows any CSS function, as long as the outcome ends up being a
<number> | <length>.
- WebKit: requires a number literal, length literal, or
calc()with type «[ ]». The calc() behaves as 0 instead of the resulting number, though. attr() isn't supported yet
- Servo: requires a number literal, length literal, or
calc()with type «[ "length" → 1 ]». sibling-index() isn't supported yet.
On a
<svg>, thewidthandheightattributes not only set presentational hints, they can also set the natural sizes.But what kind of things should be accepted for that purpose? Somewhat related to #12479
<number> | <length>.calc()with type «[ ]». Thecalc()behaves as 0 instead of the resulting number, though.attr()isn't supported yetcalc()with type «[ "length" → 1 ]».sibling-index()isn't supported yet.