layout-with-inline-svg-001.html (1229B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: layout of child SVG elements.</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> 5 <link rel="help" href="https://drafts.csswg.org/css-position/#position-property"> 6 <link rel="help" href="https://crbug.com/633212"/> 7 <meta name="assert" content="This test ensures that a flexbox and its flex items are properly laid out when containing an empty SVG element in an abspos container."/> 8 9 <style> 10 html, body { 11 margin: 0; 12 } 13 14 #flexbox { 15 display: flex; 16 flex-direction: column; 17 } 18 19 #flexitem { 20 outline: 1px solid black; 21 width: 100%; 22 height: 166px; 23 position: relative; 24 background: green; 25 } 26 27 #abspos { 28 position: absolute; 29 } 30 31 #container { 32 background: red; 33 } 34 </style> 35 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 39 <body> 40 41 <div id="container"> 42 <div id="flexbox"> 43 <div id="flexitem"> 44 <div id="abspos"> 45 <svg></svg> 46 </div> 47 </div> 48 </div> 49 </div> 50 51 <script> 52 test(function() { 53 assert_equals(document.getElementById('flexbox').offsetWidth, 54 document.getElementById('flexitem').offsetWidth); 55 }, "sizes"); 56 </script> 57 58 </body> 59 </html>