setting-overflow-visible.html (1643B)
1 <!doctype html> 2 <title>The hr element: setting 'overflow: visible'</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 /* Use 0 margin for hr instead of default 0.5em to make things simpler */ 7 hr { 8 margin-top: 0; 9 margin-bottom: 0; 10 } 11 .wrapper { 12 height: 150px; 13 position: relative; 14 } 15 #test-visible { 16 overflow: visible; 17 } 18 .float, hr::before { 19 content: ""; 20 float: left; 21 width: 50px; 22 height: 50px; 23 background-color: orange; 24 } 25 .clear { 26 clear: left; 27 } 28 </style> 29 30 <div class=wrapper> 31 <div class=float></div> 32 <hr id=test-control> 33 <div class=float></div> 34 </div> 35 36 <div class=wrapper> 37 <div class=float></div> 38 <hr id=test-visible> 39 <div class=float></div> 40 </div> 41 42 <script> 43 44 test(() => { 45 const hr = document.getElementById('test-control'); 46 assert_equals(hr.offsetLeft, 50, 'hr.offsetLeft'); 47 assert_equals(hr.offsetTop, 0, 'hr.offsetTop'); 48 assert_equals(hr.clientHeight, 50, 'hr.clientHeight'); 49 const divAfter = hr.nextElementSibling; 50 assert_equals(divAfter.offsetLeft, 0, 'divAfter.offsetLeft'); 51 assert_equals(divAfter.offsetTop, 50 + 1 + 1 /* hr border */, 'divAfter.offsetTop'); 52 }, 'control'); 53 54 test(() => { 55 const hr = document.getElementById('test-visible'); 56 assert_equals(hr.offsetLeft, 0, 'hr.offsetLeft'); 57 assert_equals(hr.offsetTop, 0, 'hr.offsetTop'); 58 assert_equals(hr.clientHeight, 0, 'hr.clientHeight'); 59 const divAfter = hr.nextElementSibling; 60 assert_equals(divAfter.offsetLeft, 50 + 50, 'divAfter.offsetLeft'); 61 assert_equals(divAfter.offsetTop, 1 + 1 /* hr border */, 'divAfter.offsetTop'); 62 }, 'overflow: visible'); 63 64 </script>