| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>foreignObject is not an abs pos containing block, but can be rotated</title> |
| <style type="text/css"> |
| html { padding: 8px; margin: 0; } |
| body { margin: 0; padding: 0; } |
| div { width: 200px; height: 200px; } |
| .control { background: red; color: yellow; } |
| .test { position: absolute; left: 8px; top: 8px; background: white; } |
| </style> |
| </head> |
| <body> |
| <div class="control">FAIL</div> |
| <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> |
| <circle cx="100" cy="100" r="50" fill="green"/> |
| <foreignObject x="0" y="0" width="200" height="200" transform="rotate(45)"> |
| <div xmlns="http://www.w3.org/1999/xhtml" class="test"> There should be a green circle below with no red on this page. </div> |
| </foreignObject> |
| </svg> |
| </body> |
| </html> |
