display-none-mask-ref.html (1653B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 </head> 7 8 <body> 9 <svg width="200" height="200"> 10 <foreignObject x="0" y="0" width="200" height="200"> 11 <div style="width: 200px; height: 200px;"></div> 12 </foreignObject> 13 </svg> 14 <svg width="200" height="200"> 15 <foreignObject x="0" y="0" width="200" height="200"> 16 <div style="width: 200px; height: 200px; background: green"></div> 17 </foreignObject> 18 </svg> 19 <svg width="200" height="200"> 20 <foreignObject x="0" y="0" width="200" height="200"> 21 <div style="width: 200px; height: 200px;"></div> 22 </foreignObject> 23 </svg> 24 <svg width="200" height="200"> 25 <foreignObject x="0" y="0" width="200" height="200"> 26 <div style="width: 200px; height: 200px; background: green"></div> 27 </foreignObject> 28 </svg> 29 30 <!-- make sure masking actually works --> 31 <svg width="200" height="200"> 32 <rect x="0" y="0" width="100" height="50" fill="green"></rect> 33 <rect x="0" y="100" width="100" height="50" fill="green"></rect> 34 </svg> 35 <svg width="200" height="200"> 36 <rect x="0" y="0" width="100" height="50" fill="green"></rect> 37 <rect x="0" y="100" width="100" height="50" fill="green"></rect> 38 </svg> 39 40 <!-- make sure masking works on active content --> 41 <svg width="200" height="200"> 42 <rect x="0" y="0" width="100" height="50" fill="green"></rect> 43 <rect x="0" y="100" width="100" height="50" fill="green"></rect> 44 </svg> 45 <svg width="200" height="200"> 46 <rect x="0" y="0" width="100" height="50" fill="green"></rect> 47 <rect x="0" y="100" width="100" height="50" fill="green"></rect> 48 </svg> 49 </body> 50 </html>