table-has-box-sizing-border-box-002.html (936B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="David Grogan" href="dgrogan@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#mapping"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=598134" /> 7 <meta name="assert" content="default <table> box-sizing:border-box is not applied to non-table elements that have display:table" /> 8 <title> 9 UA stylesheet, <table>, box-sizing 10 </title> 11 12 <style> 13 #table { 14 display: table; 15 width: 100px; 16 height: 100%; 17 background: green; 18 padding-bottom: 35px; 19 } 20 21 #redSquare { 22 height: 100px; 23 width: 100px; 24 background-color: red; 25 position: absolute; 26 z-index: -1; 27 } 28 </style> 29 30 <p>Test passes if there is a filled green square and <strong>no red</strong>. 31 </p> 32 <div id="redSquare"></div> 33 <div style="height:65px"> 34 <div id="table"></div> 35 </div>