summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html
blob: 0b2624859eafe1ecac023b4c14b6bee9d0c3a760 (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
<!DOCTYPE html>
<link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements">
<!-- A test for the following paragraphs:
The element's box is expected to be constrained in the inline direction by
the inline content size of the fieldset as if it had used its computed
inline padding.
Example:
For example, if the fieldset has a specified padding of 50px, then the
rendered legend will be positioned 50px in from the fieldset's border. The
padding will further apply to the anonymous fieldset content box instead
of the fieldset element itself.
-->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
fieldset {
  width: 400px;
  margin: 0;
  padding: 0 50px;
  border: 2px solid black;
}
legend {
  width: 100%;
  padding: 0;
  background-color: yellow;
}
.content {
  background-color: lime;
}
</style>
<fieldset>
<legend>Legend</legend>
</fieldset>

<script>
test(() => {
  let fieldset = document.querySelector('fieldset');
  let legend = document.querySelector('legend');
  assert_equals(legend.offsetLeft - fieldset.offsetLeft, 52);
  assert_equals(legend.offsetWidth, 400);
}, 'Test legend\'s inline-size in a fieldset with inline paddings');
</script>