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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<!doctype html>
<title>legend and float and position: absolute/fixed</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
body { margin: 0; }
fieldset { margin: 0; padding: 20px; border: 10px solid; width: 300px; }
legend { height: 10px; }
#legend1 { float: left; }
#legend2 { float: right; }
#legend3 { position: absolute; }
#legend4 { position: fixed; }
</style>
<fieldset id=fieldset>
<div>div</div>
<legend id=legend1>legend1</legend>
<legend id=legend2>legend2</legend>
<legend id=legend3>legend3</legend>
<legend id=legend4>legend4</legend>
<legend id=legend5>legend5</legend>
</fieldset>
<script>
const fieldset = document.getElementById('fieldset');
const legends = document.getElementsByTagName('legend');
const [legend1, legend2, legend3, legend4, legend5] = legends;
const expectedTop = 0;
const expectedLeft = 10 + 20;
function assert_rendered_legend(legend) {
assert_equals(legend.offsetTop, expectedTop, `${legend.id}.offsetTop`);
assert_equals(legend.offsetLeft, expectedLeft, `${legend.id}.offsetLeft`);
for (const other of legends) {
if (other === legend) {
continue;
}
if (other.offsetTop === expectedTop && other.offsetLeft === expectedLeft) {
assert_unreached(`${other.id} should not be the "rendered legend"`);
}
}
}
test(t => {
assert_rendered_legend(legend5);
}, 'no dynamic changes');
test(t => {
const legend = document.createElement('legend');
t.add_cleanup(() => {
legend.remove();
});
legend.id = 'script-inserted';
legend.textContent = 'script-inserted legend';
fieldset.insertBefore(legend, legend1);
assert_rendered_legend(legend);
legend.remove();
assert_rendered_legend(legend5);
}, 'inserting a new legend and removing it again');
test(t => {
t.add_cleanup(() => {
legend1.id = 'legend1';
legend2.id = 'legend2';
});
legend2.id = '';
assert_rendered_legend(legend2);
legend1.id = '';
assert_rendered_legend(legend1);
legend1.id = 'legend1';
assert_rendered_legend(legend2);
legend2.id = 'legend2';
assert_rendered_legend(legend5);
}, 'dynamic changes to float');
test(t => {
t.add_cleanup(() => {
legend3.id = 'legend3';
legend4.id = 'legend4';
});
legend4.id = '';
assert_rendered_legend(legend4);
legend3.id = '';
assert_rendered_legend(legend3);
legend3.id = 'legend3';
assert_rendered_legend(legend4);
legend4.id = 'legend4';
assert_rendered_legend(legend5);
}, 'dynamic changes to position');
</script>
|
