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
|
<!doctype html>
<title>legend and margin (inline direction)</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
fieldset { margin: 0 0 10px 0; padding: 20px; border: 10px solid; width: 500px; }
legend { height: 10px; width: 200px; padding: 0; }
#legend-center { margin-left: auto; margin-right: auto; }
#legend-right { margin-left: auto; }
#legend-10 { margin-left: 10px; }
</style>
<fieldset>
<legend id=legend-left>left</legend>
</fieldset>
<fieldset>
<legend id=legend-center>center</legend>
</fieldset>
<fieldset>
<legend id=legend-right>right</legend>
</fieldset>
<fieldset>
<legend id=legend-10>10px</legend>
</fieldset>
<script>
const legends = document.getElementsByTagName('legend');
const [legendLeft, legendCenter, legendRight, legend10] = legends;
const expectedLeft = 8 + 10 + 20;
const expectedCenter = expectedLeft + (500 / 2) - (200 / 2);
const expectedRight = expectedLeft + 500 - 200;
const expected10 = expectedLeft + 10;
test(() => {
assert_equals(legendLeft.offsetLeft, expectedLeft);
}, 'left');
test(() => {
assert_equals(legendCenter.offsetLeft, expectedCenter);
}, 'center');
test(() => {
assert_equals(legendRight.offsetLeft, expectedRight);
}, 'right');
test(() => {
assert_equals(legend10.offsetLeft, expected10);
}, '10px');
</script>
|
