Blitz - WPT: fieldset-003.html

wpt / css / css-break / fieldset-003.html

<!DOCTYPE html>
<link rel="author" title="Ana Sollano Kim" href="mailto:ansollan@microsoft.com">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration">
<link rel="match" href="fieldset-003-ref.html">
<p>There should be a light blue fieldset that starts in the first column and
  ends in the third. Its blue violet legend should only be in the first column,
  consuming the top border. The bottom border should only be in the third column.
</p>
<div style="column-count:3; column-fill:auto; column-gap:10px; width: 680px; height:40px;">
  <fieldset style="margin:0; border:60px solid pink; padding:0; width:100px; background:lightblue; height:10px;">
    <legend style="padding:0; width:100px; height:50px; background:blueviolet;"></legend>
  </fieldset>
</div>

/css/css-break/fieldset-003-ref.html

<!DOCTYPE html>
<link rel="author" title="Ana Sollano Kim" href="mailto:ansollan@microsoft.com">
<p>There should be a light blue fieldset that starts in the first column and
  ends in the third. Its blue violet legend should only be in the first column,
  consuming the top border. The bottom border should only be in the third column.
</p>
<div style="float:left; border:60px solid pink; border-bottom:none; width:100px; height:0;">
  <div style="margin-top:-60px; background:lightblue; height:60px"></div>
  <div style="margin-top:-55px; background:blueviolet; height:50px"></div>
</div>
<div style="float:left; margin-left:10px; border:60px solid pink; border-top:none; border-bottom:none; width:100px; height:10px; background:lightblue;"></div>
<div style="float:left; margin-left:10px; border:60px solid pink; border-top:none; width:100px; height:0; background:lightblue;"></div>