1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!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>
|
