legend-grid-flex-multicol.html (1259B)
1 <!doctype html> 2 <title>legend and flexbox, grid & multicol</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 legend { width: 200px; background: silver } 7 #flex { display: flex; } 8 #inline-flex { display: inline-flex; } 9 #grid { display: grid; } 10 #inline-grid { display: inline-grid; } 11 #grid, #inline-grid { grid-template-columns: auto auto } 12 #multicol { columns: 2; } 13 </style> 14 <fieldset><legend id=ref>12</legend></fieldset> 15 <fieldset><legend id=flex><div>1</div><div>2</div></legend></fieldset> 16 <fieldset><legend id=inline-flex><div>1</div><div>2</div></legend></fieldset> 17 <fieldset><legend id=grid><div>1</div><div>2</div></legend></fieldset> 18 <fieldset><legend id=inline-grid><div>1</div><div>2</div></legend></fieldset> 19 <fieldset><legend id=multicol><div>1</div><div>2</div></legend></fieldset> 20 <script> 21 const ref = document.getElementById('ref'); 22 for (const id of ["flex", "inline-flex", "grid", "inline-grid", "multicol"]) { 23 test(() => { 24 const elm = document.getElementById(id); 25 assert_equals(elm.offsetHeight, ref.offsetHeight, 'offsetHeight'); 26 if (id !== "multicol") { 27 assert_equals(getComputedStyle(elm).display, id, 'display'); 28 } 29 }, id); 30 } 31 </script>