doc_inspector_infobar_04.html (1051B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 6 <style> 7 .flex { 8 display: flex; 9 } 10 11 .grid { 12 display: grid; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="flex-container" class="flex"> 18 <div id="flex-item"></div> 19 <div id="flex-container-item" class="flex"></div> 20 </div> 21 22 <div id="grid-container" class="grid"> 23 <div id="grid-item"></div> 24 <div id="grid-container-item" class="grid"></div> 25 </div> 26 27 <div id="flex-container-with-grid" class="flex"> 28 <div id="flex-item-grid-container" class="grid"></div> 29 </div> 30 31 <div id="flex-text-container" class="flex"> 32 flex item (node text) 33 </div> 34 35 <div id="grid-text-container" class="grid"> 36 grid item (node text). The text content for this text node needs to be long enough 37 so that the inspector does not inline it. Indeed we want to be able to select and 38 highlight it independently in the inspector so we can test the grid item infobar. 39 </div> 40 </body> 41 </html>