<!DOCTYPE html> <meta charset="utf-8"> <title>Reference case for bug 1673677</title> <style> table, tr, td { border: 1px solid; border-width: 2px 2px 4px 4px; padding: 3px 3px 6px 6px; margin: 8px 8px 12px 12px; border-spacing: 0; } td { vertical-align: baseline; line-height: 0; } .table-nested-cell { /* Explicitly specify inner size, due to bug 1166120 */ inline-size: 125px; block-size: 100px; } .filler-nested-table { inline-size: 50px; block-size: 75px; background: purple; display: inline-block; } .filler { inline-size: 40px; block-size: 30px; background: pink; display: inline-block; } .inner-table { contain: layout; } </style> <table> <tr> <td class="table-nested-cell"> <table class="inner-table" style="writing-mode: vertical-lr;"> <tr><td><div class="filler-nested-table"></div></td></tr> </table> </td> <td><div class="filler"></div></td> </tr> </table> <table style="writing-mode: vertical-lr;"> <tr> <td class="table-nested-cell"> <table class="inner-table" style="writing-mode: horizontal-tb;"> <tr><td><div class="filler-nested-table"></div></td></tr> </table> </td> <td><div class="filler"></div></td> </tr> </table> <table style="writing-mode: vertical-rl;"> <tr> <td class="table-nested-cell"> <table class="inner-table" style="writing-mode: horizontal-tb;"> <tr><td><div class="filler-nested-table"></div></td></tr> </table> </td> <td><div class="filler"></div></td> </tr> </table>