svg-intrinsic-size-invalidation.html (849B)
1 <!doctype html> 2 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1730351"> 3 <link rel="help" href="https://drafts.csswg.org/css-sizing/#valdef-width-max-content"> 4 <link rel="match" href="svg-intrinsic-size-invalidation-ref.html"> 5 <style> 6 #avatar { 7 width: 128px; 8 display: block; 9 } 10 #container { 11 width: max-content; 12 border: 10px solid green; 13 } 14 </style> 15 <div id="ancestor"> 16 <div id="container"> 17 <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" id="avatar"> 18 <rect height="100%" width="100%" fill="blue"></rect> 19 </svg> 20 </div> 21 </div> 22 <script> 23 onload = function() { 24 let avatar = document.getElementById("avatar"); 25 let ancestor = document.getElementById("ancestor"); 26 avatar.getBoundingClientRect(); 27 avatar.style.maxWidth = "100px"; 28 ancestor.style.padding = "10px"; 29 } 30 </script>