popover-anchor-display-ref.html (1423B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel=author href="mailto:masonf@chromium.org"> 4 5 <p>There should be a green box attached to the right side of each orange box.</p> 6 <div id=proper_anchors class=wrapper> 7 <div><div class=anchor></div><div class=popover></div></div> 8 <div><div class=anchor></div><div class=popover></div></div> 9 <div><div class=anchor></div><div class=popover></div></div> 10 <div><div class=anchor></div><div class=popover></div></div> 11 <div><div class=anchor></div><div class=popover></div></div> 12 <div><div class=anchor></div><div class=popover></div></div> 13 </div> 14 15 <p>There should NOT be any red boxes next to the orange ones. (Red ones down below are ok.)</p> 16 <div id=improper_anchors class=wrapper> 17 <div><div class=anchor></div><div class=popover></div></div> 18 <div><div class=anchor></div><div class=popover></div></div> 19 </div> 20 21 <style> 22 body { margin:0; padding:0; box-sizing: border-box; } 23 p {height: 25px;} 24 .wrapper { 25 display: flex; 26 flex-direction: row; 27 flex-wrap: wrap; 28 } 29 .wrapper>div { 30 position:relative; 31 width: 125px; 32 height: 75px; 33 font-size: 0; 34 } 35 .wrapper>div div { 36 display:inline-block; 37 width: 50px; 38 height: 50px; 39 } 40 .anchor { 41 background: orange; 42 } 43 #proper_anchors .popover { 44 background: lime; 45 } 46 #improper_anchors .popover { 47 background: red; 48 position:fixed; 49 left: 0; 50 top: 0; 51 } 52 </style>