| <!doctype html> |
| <title>legend and flexbox, grid & multicol</title> |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| <style> |
| legend { width: 200px; background: silver } |
| #flex { display: flex; } |
| #inline-flex { display: inline-flex; } |
| #grid { display: grid; } |
| #inline-grid { display: inline-grid; } |
| #grid, #inline-grid { grid-template-columns: auto auto } |
| #multicol { columns: 2; } |
| </style> |
| <fieldset><legend id=ref>12</legend></fieldset> |
| <fieldset><legend id=flex><div>1</div><div>2</div></legend></fieldset> |
| <fieldset><legend id=inline-flex><div>1</div><div>2</div></legend></fieldset> |
| <fieldset><legend id=grid><div>1</div><div>2</div></legend></fieldset> |
| <fieldset><legend id=inline-grid><div>1</div><div>2</div></legend></fieldset> |
| <fieldset><legend id=multicol><div>1</div><div>2</div></legend></fieldset> |
| <script> |
| const ref = document.getElementById('ref'); |
| for (const id of ["flex", "inline-flex", "grid", "inline-grid", "multicol"]) { |
| test(() => { |
| const elm = document.getElementById(id); |
| assert_equals(elm.offsetHeight, ref.offsetHeight, 'offsetHeight'); |
| if (id !== "multicol") { |
| assert_equals(getComputedStyle(elm).display, id, 'display'); |
| } |
| }, id); |
| } |
| </script> |