Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<!-- 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>