popover-anchor-display.tentative.html (3846B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel=author href="mailto:masonf@chromium.org"> 4 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> 6 <link rel=match href="popover-anchor-display-ref.html"> 7 <link rel=stylesheet href="/fonts/ahem.css"> 8 <script src="resources/popover-utils.js"></script> 9 10 <p>There should be a green box attached to the right side of each orange box.</p> 11 12 <div id=proper_anchors class=wrapper> 13 <!-- Example using the `anchor` implicit reference element --> 14 <div> 15 <div class=anchor id=anchor1></div> 16 <div id=popover1 popover=manual anchor=anchor1></div> 17 </div> 18 19 <!-- Example with `anchor` attribute but not using it for anchor pos --> 20 <div> 21 <div id=anchor2 class=anchor></div> 22 <div id=popover2 popover=manual anchor></div> 23 </div> 24 25 <!-- Example using `anchor-name` plus inset, and no `anchor` attribute --> 26 <div> 27 <div id=anchor3 class=anchor></div> 28 <div id=popover3 popover=manual></div> 29 </div> 30 31 <!-- Example using implicit anchor reference and inline anchor element --> 32 <div> 33 <span id=anchor4>X</span> 34 <div id=popover4 popover=manual anchor=anchor4></div> 35 </div> 36 37 <!-- Example using a default anchor which is not the implicit anchor --> 38 <div> 39 <div class=anchor id=anchor5></div> 40 <!-- Note `anchor=anchor1` here, not anchor5 --> 41 <div id=popover5 popover=manual anchor=anchor1></div> 42 </div> 43 44 <!-- Example using implicit anchor reference and position-anchor:auto --> 45 <div> 46 <div class=anchor id=anchor6></div> 47 <div id=popover6 popover=manual anchor=anchor6></div> 48 </div> 49 </div> 50 51 <p>There should NOT be any red boxes next to the orange ones. (Red ones down below are ok.)</p> 52 53 <div id=improper_anchors class=wrapper> 54 <!-- Example using implicit anchor reference and anchor(auto foo)--> 55 <div> 56 <div class=anchor id=anchor7></div> 57 <div id=popover7 popover=manual anchor=anchor7></div> 58 </div> 59 60 <!-- Example using invalid anchor name --> 61 <div> 62 <div class=anchor id=anchor8></div> 63 <div id=popover8 popover=manual anchor=anchor8></div> 64 </div> 65 </div> 66 67 <script> 68 Array.from(document.querySelectorAll('[popover=manual]')).forEach(p => p.showPopover()); 69 </script> 70 71 <style> 72 body { margin:0; padding:0; box-sizing: border-box; } 73 p {height: 25px;} 74 .wrapper { 75 display: flex; 76 flex-direction: row; 77 flex-wrap: wrap; 78 } 79 .wrapper>div { 80 position:relative; 81 width: 125px; 82 height: 75px; 83 } 84 .wrapper>div div { 85 width: 50px; 86 height: 50px; 87 } 88 .anchor { 89 background: orange; 90 } 91 [popover] { 92 inset: auto; 93 padding:0; 94 border:0; 95 } 96 #proper_anchors [popover] { 97 background: lime; 98 } 99 #improper_anchors [popover] { 100 background: red; 101 } 102 #popover1 { 103 left: anchor(right); 104 top: anchor(top); 105 } 106 #anchor2 { 107 anchor-name: --anchor2; 108 } 109 #popover2 { 110 left: anchor(--anchor2 right); 111 top: anchor(--anchor2 top); 112 } 113 #anchor3 { 114 anchor-name: --anchor3; 115 } 116 #popover3 { 117 inset:auto; 118 left: anchor(--anchor3 right); 119 top: anchor(--anchor3 top); 120 } 121 #anchor4 { 122 font-family: Ahem; 123 font-size: 50px; 124 color: orange; 125 } 126 #popover4 { 127 left: anchor(right); 128 top: anchor(top); 129 } 130 #anchor5 { 131 anchor-name: --anchor5; 132 } 133 #popover5 { 134 position-anchor: --anchor5; 135 left: anchor(right); /* shouldn't use the implicit anchor */ 136 top: anchor(top); 137 } 138 #popover6 { 139 position-anchor: auto; 140 left: anchor(right); 141 top: anchor(top); 142 } 143 #popover7 { 144 left: anchor(auto right); 145 top: anchor(auto top); 146 } 147 #popover8 { 148 /* The `implicit` keyword was renamed to `auto`, and anyway should not 149 work in this context. */ 150 left: anchor(implicit right); 151 top: anchor(implicit top); 152 } 153 </style>