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

12345678910111213141516171819202122232425262728293031323334353637383940414243
  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. clip-path: url(#myClip);
  11. }
  12. #absolutePosition {
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. width: 400px;
  17. height: 400px;
  18. background-color: blue;
  19. }
  20. </style>
  21. <body style="margin: 0px;">
  22. <div id="outer">
  23. <div id="clipped">
  24. <div id="absolutePosition">
  25. <!-- This should only be clipped by the clip-path, not by the 100x100
  26. overflow:hidden clip. -->
  27. </div>
  28. </div>
  29. </div>
  30. <svg height="0">
  31. <defs>
  32. <clipPath id="myClip">
  33. <rect x="0" y="0" width="100" height="100"/>
  34. <rect x="100" y="100" width="100" height="100"/>
  35. <rect x="200" y="200" width="100" height="100"/>
  36. </clipPath>
  37. </defs>
  38. </svg>
  39. </body>
  40. </html>