mask-box-image.html 993 B

123456789101112131415161718192021222324
  1. <!doctype HTML>
  2. <script src="../../resources/run-after-layout-and-paint.js"></script>
  3. <script>
  4. if (window.testRunner)
  5. testRunner.waitUntilDone();
  6. onload = () => {
  7. runAfterLayoutAndPaint(() => {
  8. target1.style.webkitMaskBoxImage = "linear-gradient(transparent, green)";
  9. runAfterLayoutAndPaint(() => {
  10. target2.style.webkitMaskBoxImage = "linear-gradient(transparent, green)";
  11. runAfterLayoutAndPaint(() => {
  12. target3.style.webkitMaskBoxImage = "initial";
  13. if (window.testRunner)
  14. testRunner.notifyDone();
  15. });
  16. });
  17. });
  18. };
  19. </script>
  20. <div id="target1" style="width: 100px; height: 100px; background: blue"></div>
  21. <div id="target2" style="width: 100px; height: 100px; background: green;
  22. -webkit-mask-box-image: linear-gradient(green, transparent)"></div>
  23. <div id="target3" style="width: 100px; height: 100px; background: cyan;
  24. -webkit-mask-box-image: linear-gradient(green, transparent)"></div>