doc_html_tooltip_doorhanger-01.xhtml (2099B)
1 <?xml version="1.0"?> 2 <?xml-stylesheet href="chrome://global/skin/global.css"?> 3 <?xml-stylesheet href="chrome://devtools/skin/light-theme.css"?> 4 <window class="theme-light" 5 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 6 xmlns:html="http://www.w3.org/1999/xhtml" 7 title="Tooltip test"> 8 9 <vbox flex="1" style="position: relative"> 10 <!-- LTR on left edge --> 11 <html:div 12 id="anchor1" 13 class="anchor" 14 data-hang="right" 15 style="width:10px; height: 10px; position: absolute; background: red; 16 top: 0; left: 0;"> 17 </html:div> 18 19 <!-- RTL but too close to the left edge for the doorhanger to hang left --> 20 <html:div 21 id="anchor2" 22 class="anchor" 23 data-hang="right" 24 style="width:10px; height: 10px; position: absolute; background: red; 25 top: 0; left: 25px; direction: rtl"> 26 </html:div> 27 28 <!-- RTL --> 29 <html:div 30 id="anchor3" 31 class="anchor" 32 data-hang="left" 33 style="width:10px; height: 10px; position: absolute; background: red; 34 top: 0; left: 250px; direction: rtl"> 35 </html:div> 36 37 <!-- LTR --> 38 <html:div 39 id="anchor4" 40 class="anchor" 41 data-hang="right" 42 style="width:80%; height: 10px; position: absolute; background: red; 43 top: 0; left: 50px;"> 44 </html:div> 45 46 <!-- LTR on right edge --> 47 <html:div 48 id="anchor5" 49 class="anchor" 50 data-hang="left" 51 style="width:10px; height: 10px; position: absolute; background: red; 52 bottom: 0; right: 0;"> 53 </html:div> 54 55 <!-- RTL near right edge --> 56 <html:div 57 id="anchor6" 58 class="anchor" 59 data-hang="left" 60 style="width:10px; height: 10px; position: absolute; background: red; 61 bottom: 0; right: 25px; direction: rtl"> 62 </html:div> 63 64 <!-- LTR near left edge due to wide anchor --> 65 <html:div 66 id="anchor7" 67 class="anchor" 68 data-hang="right" 69 style="width:80%; height: 10px; position: absolute; background: red; 70 bottom: 0; right: 50px;"> 71 </html:div> 72 </vbox> 73 </window>