blob: e98de892d3092b337308522c19cc173650036912 (
plain)
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!doctype html>
<title>fieldset percentage block size</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
fieldset { block-size: 100px; margin: 20px; padding: 0; border: 10px solid; }
.rendered-legend { block-size: 80%; background: lime; padding: 0; }
.second-legend { block-size: 100%; background: yellow; padding: 0; }
fieldset > div { block-size: 100%; background: fuchsia; }
</style>
<div style="writing-mode: horizontal-tb">
<fieldset>
<legend class="rendered-legend">rendered legend</legend>
<legend class="second-legend">second legend</legend>
<div>div</div>
</fieldset>
</div>
<div style="writing-mode: vertical-lr">
<fieldset>
<legend class="rendered-legend">rendered legend</legend>
<legend class="second-legend">second legend</legend>
<div>div</div>
</fieldset>
</div>
<div style="writing-mode: vertical-rl">
<fieldset>
<legend class="rendered-legend">rendered legend</legend>
<legend class="second-legend">second legend</legend>
<div>div</div>
</fieldset>
</div>
<table cellspacing="0" cellpadding="0" style="width:100px; height:60px;">
<tr>
<td>
<fieldset style="border:none; padding:0; height:100%; margin:0; margin-top:13px;">
<div><div id="elm"></div></div>
</fieldset>
</td>
</tr>
</table>
<script>
for (const div of document.querySelectorAll('div[style]')) {
for (const el of div.firstElementChild.children) {
test(() => {
const expected = el.textContent === 'rendered legend' ? '80px' : '30px';
// 30px because: 100px - (max(0, legend-block-size - border-block-start))
assert_equals(getComputedStyle(el).blockSize, expected);
}, `${el.textContent} (${div.getAttribute('style')})`);
}
}
// crbug.com/1138204. Though the specification doesn't mention this behavior,
// there must be no doubt about the expected behavior.
test(() => {
const fieldset = document.querySelector('table fieldset');
const initialHeight = fieldset.offsetHeight;
document.querySelector('#elm').style.display = 'none';
assert_equals(fieldset.offsetHeight, initialHeight);
}, 'Fieldset with a percentage height should not increase the height on every reflow.');
</script>
|
