negative-outline-offset-ref.html (539B)
1 <!DOCTYPE html> 2 <style> 3 div { 4 border: 2px solid black; 5 padding: 5px 0; /* No horizontal padding as outline-offset is not affected by it and span simulates it */ 6 font-size: 16px; 7 } 8 9 span { 10 display: block; 11 12 /* 3/6px offset for border */ 13 height: 2px; 14 width: calc(100% - 20em + 6px); 15 margin: -1px calc(10em - 3px); /* -1px vertical to remove height of span from div height */ 16 background: red; 17 } 18 </style> 19 20 <p>PASS if there is a thin red line in the middle of the box.</p> 21 <div> 22 <span></span> 23 </div>