| <!DOCTYPE html> |
| <html> |
| <head> |
| </head> |
| <body> |
| <style> |
| .table { |
| display: table; |
| border-collapse: collapse; |
| border: 25px solid green; |
| border-top: 10px solid cyan; |
| position: absolute; |
| box-sizing: border-box; |
| outline: 5px solid blue; |
| } |
| .tbody { display: table-row-group; } |
| .tr { display: table-row; } |
| .td { display: table-cell; } |
| .block { |
| background-color: yellow; |
| height: 50px; |
| width: 50px; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| window.onload = function () { |
| checkLayout(".table"); |
| } |
| </script> |
| <div class="table" data-expected-height="85px"> |
| <div class="tbody"> |
| <div class="tr"> |
| <div class="td"> |
| <div class="block"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div style="top: 200px;" class="table" data-expected-height="85px"> |
| <div class="tbody"> |
| <div class="tr"> |
| <div class="td"> |
| <div class="block"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div style="bottom: 100px;" class="table" data-expected-height="85px"> |
| <div class="tbody"> |
| <div class="tr"> |
| <div class="td"> |
| <div class="block"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
