| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <title>Collapsed borders track writing mode changes</title> |
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| <script src="/common/rendering-utils.js"></script> |
| <style> |
| .bordermix { |
| border-top: 10px solid red; |
| border-bottom: 20px solid green; |
| border-left: 30px solid yellow; |
| border-right: 40px solid orange; |
| } |
| |
| .vertical { |
| writing-mode: vertical-rl; |
| } |
| |
| main td { |
| width:100px; |
| height:100px; |
| } |
| main table { |
| border-collapse: collapse; |
| } |
| </style> |
| |
| <main> |
| |
| <table class="bordermix targettable"> |
| <td>TABLE</td> |
| </table> |
| |
| <table class="targettable"> |
| <tbody class="bordermix"> |
| <td>TBODY</td> |
| </tbody> |
| </table> |
| |
| <table class="targettable"> |
| <tr class="bordermix"> |
| <td>TR</td> |
| </tr> |
| </table> |
| |
| <table class="targettable"> |
| <td class="bordermix">TD</td> |
| </table> |
| |
| </main> |
| <script> |
| var test = async_test("Table borders track writing mode changes"); |
| let targets = Array.from(document.querySelectorAll(".targettable")); |
| |
| function assertTargetSize() { |
| for (let target of targets) { |
| assert_equals(target.offsetWidth, 172); |
| assert_equals(target.offsetHeight, 132); |
| } |
| } |
| test.step(assertTargetSize); |
| |
| waitForAtLeastOneFrame().then( _ => { |
| for (let target of targets) |
| target.classList.toggle("vertical"); |
| document.body.offsetTop; |
| test.step(assertTargetSize); |
| test.done(); |
| }); |
| |
| </script> |
