summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-justify-self.html
blob: 29df29d17778a9d3d592c5e942f093a44f419b3c (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
<!doctype html>
<title>legend align to justify-self</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<fieldset><legend>x</legend></fieldset>
<fieldset><legend align=left>x</legend></fieldset>
<fieldset><legend align=center>x</legend></fieldset>
<fieldset><legend align=right>x</legend></fieldset>
<fieldset><legend align=lEfT>x</legend></fieldset>
<fieldset><legend align=cEnTeR>x</legend></fieldset>
<fieldset><legend align=rIgHt>x</legend></fieldset>
<!-- invalid values -->
<fieldset><legend align=justify>x</legend></fieldset>
<fieldset><legend align="left ">x</legend></fieldset>
<!-- dir -->
<fieldset><legend dir=ltr>x</legend></fieldset>
<fieldset><legend dir=rtl>x</legend></fieldset>
<fieldset dir=rtl><legend dir=ltr>x</legend></fieldset>
<fieldset dir=rtl><legend dir=rtl>x</legend></fieldset>
<script>
for (const fieldset of document.querySelectorAll('fieldset')) {
  test(() => {
  	const legend = fieldset.firstChild;
  	const align = legend.align.toLowerCase();
  	let expected = 'auto';
    switch (align) {
      case 'left': expected = 'left'; break;
      case 'center': expected = 'center'; break;
      case 'right': expected = 'right'; break;
    }
    assert_equals(getComputedStyle(legend).justifySelf, expected);
  }, `${fieldset.outerHTML}`)
}
</script>