mask-on-outflowElement-01b.html 849 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!DOCTYPE html>
  2. <html>
  3. <style type="text/css">
  4. #outer {
  5. width: 100px;
  6. height: 100px;
  7. overflow: hidden;
  8. }
  9. #clipped {
  10. mask: url(mask-on-outflowElement.svg);
  11. width: 300px;
  12. height: 300px;
  13. }
  14. #absolutePosition {
  15. position:absolute;
  16. top: 0;
  17. left: 0;
  18. width: 400px;
  19. height: 400px;
  20. background-color: blue;
  21. }
  22. </style>
  23. <body style="margin: 0px;">
  24. <div id="outer">
  25. <div id="clipped">
  26. <div id="absolutePosition">
  27. <!-- This should only be clipped by the mask, not by the 100x100
  28. overflow:hidden clip.
  29. image mask is always clipped by the rect of associated element. The
  30. forth rectangle in mask-on-outflowElement.svg is clipped out since
  31. the size of #clipped is (w=300, height=300)
  32. -->
  33. </div>
  34. </div>
  35. </div>
  36. </body>
  37. </html>