LayoutTests/compositing/masks/become-tiled-mask.html

3838 {
3939 window.setTimeout(function() {
4040 document.getElementById('box').classList.add('large');
41  if (window.testRunner)
42  testRunner.notifyDone();
 41 if (window.testRunner) {
 42 window.setTimeout(function() {
 43 testRunner.notifyDone();
 44 }, 100);
 45 }
4346 }, 0);
4447 }
4548

LayoutTests/compositing/masks/cease-tiled-mask.html

3838 {
3939 window.setTimeout(function() {
4040 document.getElementById('box').classList.remove('large');
41  if (window.testRunner)
42  testRunner.notifyDone();
 41 if (window.testRunner) {
 42 window.setTimeout(function() {
 43 testRunner.notifyDone();
 44 }, 100);
 45 }
4346 }, 0);
4447 }
4548

LayoutTests/css3/masking/mask-base64-expected.html

 1<!DOCTYPE html>
 2<html lang="en">
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #front
 10 {
 11 width: 200px;
 12 height: 160px;
 13 background-color: green;
 14 -webkit-mask-repeat: no-repeat;
 15 -webkit-mask-origin: content-box;
 16 -webkit-mask-clip: content-box;
 17 }
 18 </style>
 19 <script>
 20 var sizeX = 50, sizeY = 40, spaceX = 0, spaceY = 0, width = 200, height = 160;
 21
 22 var urls = Array(), size = Array(), position = Array();
 23
 24 function addMasks() {
 25 for (var x = 0; x < width; x += sizeX + spaceX) {
 26 for (var y = 0; y < height; y += sizeY + spaceY) {
 27 urls.push("url(resources/circle.svg)");
 28 size.push(sizeX + "px " + sizeY + "px");
 29 position.push(x + "px " + y + "px");
 30 }
 31 }
 32
 33 div = document.getElementById("front");
 34
 35 div.style.cssText += "-webkit-mask-image: " + urls.join(", ") + ";" +
 36 "-webkit-mask-size: " + size.join(", ") + ";" +
 37 "-webkit-mask-position: " + position.join(", ") + ";";
 38 }
 39 </script>
 40 </head>
 41
 42 <body onload="addMasks()">
 43 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a 4x4 grid of green circles.</p>
 44 <p>This test sets the mask-image value using base64.</p>
 45 <div id="front"></div>
 46 </body>
 47</html>
 48

LayoutTests/css3/masking/mask-base64.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 200px;
 12 height: 160px;
 13 background-color: green;
 14 -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjM2MCIgaGVpZ2h0PSIyODgiPgogICAgPGNpcmNsZSBjeD0iMTgwIiBjeT0iMTQ0IiByPSI4MCIgLz4KPC9zdmc+Cgo=);
 15 -webkit-mask-size: 50px 40px;
 16 }
 17 </style>
 18 </head>
 19
 20 <body>
 21 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a 4x4 grid of green circles.</p>
 22 <p>This test sets the mask-image value using base64.</p>
 23 <div id="maskedElement"></div>
 24 </body>
 25</html>

LayoutTests/css3/masking/mask-multiple-values-expected.html

 1<!DOCTYPE html>
 2<html lang="en">
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #back {
 10 width: 500px;
 11 height: 500px;
 12 background-color: green;
 13 }
 14 .front
 15 {
 16 position: absolute;
 17 width: 300px;
 18 height: 300px;
 19 background-color: black;
 20 border: 50px solid blue;
 21 padding: 50px;
 22 -webkit-mask-repeat: no-repeat;
 23 -webkit-mask-origin: content-box;
 24 -webkit-mask-clip: border-box;
 25 }
 26 #front1 {
 27 -webkit-mask-image: url('resources/circle.png');
 28 -webkit-mask-size: 150px 120px;
 29 -webkit-mask-position: -120px -110px;
 30 }
 31 #front2 {
 32 -webkit-mask-image: url('resources/masks.svg#lowerHalf');
 33 -webkit-mask-size: 300px 240px;
 34 -webkit-mask-position: 50px 0px;
 35 }
 36 #front3 {
 37 -webkit-mask-image: url('resources/masks.svg#upperHalf');
 38 -webkit-mask-size: 300px 240px;
 39 -webkit-mask-position: 50px 0px;
 40 }
 41 #front4 {
 42 -webkit-mask-image: url('resources/masks.svg#invalidId');
 43 -webkit-mask-size: 225px 180px;
 44 -webkit-mask-position: 160px 220px;
 45 }
 46 </style>
 47 </head>
 48
 49 <body>
 50 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - This test uses multiple masks from multiple resources.</p>
 51 <div id="back">
 52 <div class="front" id="front1"></div>
 53 <div class="front" id="front2"></div>
 54 <div class="front" id="front3"></div>
 55 <div class="front" id="front4"></div>
 56 </div>
 57 </body>
 58</html>
 59

LayoutTests/css3/masking/mask-multiple-values.html

 1<!DOCTYPE html>
 2<html lang="en">
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #back {
 10 width: 500px;
 11 height: 500px;
 12 background-color: green;
 13 }
 14 #front {
 15 width: 300px;
 16 height: 300px;
 17 background-color: black;
 18 border: 50px solid blue;
 19 padding: 50px;
 20 -webkit-mask-image: url('resources/circle.png'), url('resources/masks.svg#lowerHalf'), url('resources/masks.svg#upperHalf'), url('resources/masks.svg#invalidId');
 21 -webkit-mask-size: 150px 120px, 300px 240px, 300px 240px, 225px 180px;
 22 -webkit-mask-position: -120px -110px, 50px 0px, 50px 0px, 160px 220px;
 23 -webkit-mask-repeat: no-repeat;
 24 -webkit-mask-origin: content-box;
 25 -webkit-mask-clip: border-box;
 26 }
 27 </style>
 28 </head>
 29
 30 <body>
 31 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - This test uses multiple masks from multiple resources.</p>
 32 <div id="back">
 33 <div id="front"></div>
 34 </div>
 35 </body>
 36</html>
 37

LayoutTests/css3/masking/mask-repeat-space-padding-expected.html

2626 function addMasks() {
2727 for (var x = 0; x < width; x += sizeX + spaceX) {
2828 for (var y = 0; y < height; y += sizeY + spaceY) {
29  urls.push("url(resources/circle.png)");
 29 urls.push("url(resources/circle.svg)");
3030 size.push(sizeX + "px " + sizeY + "px");
3131 position.push(x + "px " + y + "px");
3232 }

LayoutTests/css3/masking/mask-repeat-space-padding.html

1313 background-color: red;
1414 border: 50px solid blue;
1515 padding: 50px;
16  -webkit-mask-image: url("resources/circle.png");
 16 -webkit-mask-image: url("resources/circle.svg");
1717 -webkit-mask-size: 100px;
1818 -webkit-mask-repeat: space;
1919 -webkit-mask-origin: padding-box;

LayoutTests/css3/masking/mask-svg-clipped-fragmentId-expected.html

 1<!DOCTYPE html>
 2<html lang="en">
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #back {
 10 width: 320px;
 11 height: 420px;
 12 background-color: green;
 13 overflow: hidden;
 14 }
 15 #blackSVG
 16 {
 17 position: relative;
 18 left: 60px;
 19 top: -35px;
 20 }
 21 #blueSVG
 22 {
 23 position: relative;
 24 left: 70px;
 25 top: -474px;
 26 }
 27 </style>
 28 </head>
 29
 30 <body>
 31
 32 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - This test used a &lt;mask&gt; element and paints it at the side of the masked element, causing it to be clipped.</p>
 33 <div id="back">
 34 <svg id="blackSVG" width="320px" height="420px">
 35 <path fill="black" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
 36 </svg>
 37 <svg id="blueSVG" width="320px" height="420px">
 38 <path fill="blue" d="M70,20 L280,20 L280,395 L240,395 L240,60 L70,60 L70,20"/>
 39 </svg>
 40 </div>
 41 </body>
 42</html>
 43

LayoutTests/css3/masking/mask-svg-clipped-fragmentId.html

 1<!DOCTYPE html>
 2<html lang="en">
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #back {
 10 width: 320px;
 11 height: 420px;
 12 background-color: green;
 13 }
 14 #front {
 15 width: 300px;
 16 height: 400px;
 17 background-color: black;
 18 border: 10px solid blue;
 19 -webkit-mask-image: url('resources/masks.svg#upperHalf');
 20 -webkit-mask-size: 320px 420px;
 21 -webkit-mask-position: 50px -45px;
 22 -webkit-mask-repeat: no-repeat;
 23 -webkit-mask-origin: content-box;
 24 -webkit-mask-clip: border-box;
 25 }
 26 </style>
 27 </head>
 28
 29 <body>
 30 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - This test used a &lt;mask&gt; element and paints it at the side of the masked element, causing it to be clipped.</p>
 31 <div id="back">
 32 <div id="front"></div>
 33 </div>
 34 </body>
 35</html>
 36

LayoutTests/css3/masking/mask-svg-fragmentId-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 </style>
 10 </head>
 11 <body>
 12 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a green inverted-L shape and no red.</p>
 13 <p>This test references a &lt;mask&gt; element from an external SVG</p>
 14 <svg width="300px" height="400px">
 15 <path fill="green" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
 16 </svg>
 17 </body>
 18</html>

LayoutTests/css3/masking/mask-svg-fragmentId.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 300px;
 12 height: 400px;
 13 background-color: green;
 14 -webkit-mask-image:url('resources/masks.svg#upperHalf');
 15 }
 16 #redSvg
 17 {
 18 position: absolute;
 19 }
 20 </style>
 21 </head>
 22
 23 <body>
 24 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a green inverted-L shape and no red.</p>
 25 <p>This test references a &lt;mask&gt; element from an external SVG</p>
 26 <svg id="redSvg" width="300px" height="400px">
 27 <path fill="red" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
 28 </svg>
 29 <div id="maskedElement"></div>
 30 </body>
 31</html>

LayoutTests/css3/masking/mask-svg-inline-fragmentId-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 </style>
 10 </head>
 11 <body>
 12 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a green L shape and no red.</p>
 13 <p>This test references a &lt;mask&gt; element defined in the main HTML document</p>
 14 <svg width="300px" height="400px">
 15 <path fill="green" d="M20,20 L60,20 L60,340 L220,340 L220,380 L20,380 L20,20"/>
 16 </svg>
 17 </body>
 18</html>

LayoutTests/css3/masking/mask-svg-inline-fragmentId.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 300px;
 12 height: 400px;
 13 background-color: green;
 14 -webkit-mask-image:url('#lowerHalf');
 15 }
 16 #redSvg
 17 {
 18 position: absolute;
 19 }
 20 </style>
 21 </head>
 22
 23 <body>
 24 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a green L shape and no red.</p>
 25 <p>This test references a &lt;mask&gt; element defined in the main HTML document</p>
 26 <svg id="redSvg" width="300px" height="400px">
 27 <path fill="red" d="M20,20 L60,20 L60,340 L220,340 L220,380 L20,380 L20,20"/>
 28 <mask id="lowerHalf" maskUnits="objectBoundingBox">
 29 <path fill="#FFFFFF" d="M20,20 L60,20 L60,340 L220,340 L220,380 L20,380 L20,20"/>
 30 </mask>
 31 </svg>
 32 <div id="maskedElement"></div>
 33 </body>
 34</html>

LayoutTests/css3/masking/mask-svg-inline-invalid-fragmentId-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #elementToNotBeCovered
 10 {
 11 width: 300px;
 12 height: 400px;
 13 background-color: #2222FF;
 14 position: absolute;
 15 left: 10px;
 16 top: 50px;
 17 }
 18 </style>
 19 </head>
 20 <body>
 21 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue rectangle and no red.</p>
 22 <p>This test references an invalid fragment identifier.</p>
 23 <div id="elementToNotBeCovered"></div>
 24 </body>
 25</html>

LayoutTests/css3/masking/mask-svg-inline-invalid-fragmentId.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 300px;
 12 height: 400px;
 13 background-color: red;
 14 -webkit-mask-image:url('#invalidId');
 15 position: absolute;
 16 left: 10px;
 17 top: 50px;
 18 }
 19 #elementToNotBeCovered
 20 {
 21 width: 300px;
 22 height: 400px;
 23 background-color: #2222FF;
 24 position: absolute;
 25 left: 10px;
 26 top: 50px;
 27 }
 28 </style>
 29 </head>
 30
 31 <body>
 32 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue rectangle and no red.</p>
 33 <p>This test references an invalid fragment identifier.</p>
 34 <div id="elementToNotBeCovered"></div>
 35 <div id="maskedElement"></div>
 36 </body>
 37</html>

LayoutTests/css3/masking/mask-svg-invalid-fragmentId-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 </style>
 10 </head>
 11
 12 <body>
 13 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see 4 green rectangles and no red.</p>
 14 <p>This test references an invalid fragment identifier from an external SVG</p>
 15 <svg width="300px" height="400px">
 16 <rect x="5px" y="45px" width="140px" height="140px" fill="green"/>
 17 <rect x="155px" y="45px" width="140px" height="140px" fill="green"/>
 18 <rect x="155px" y="215px" width="140px" height="140px" fill="green"/>
 19 <rect x="5px" y="215px" width="140px" height="140px" fill="green"/>
 20 </svg>
 21 </body>
 22</html>

LayoutTests/css3/masking/mask-svg-invalid-fragmentId.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 300px;
 12 height: 400px;
 13 background-color: green;
 14 -webkit-mask-image:url('resources/masks.svg#invalidId');
 15 }
 16 #redSvg
 17 {
 18 position: absolute;
 19 }
 20 </style>
 21 </head>
 22
 23 <body>
 24 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see 4 green rectangles and no red.</p>
 25 <p>This test references an invalid fragment identifier from an external SVG</p>
 26 <svg id="redSvg" width="300px" height="400px">
 27 <rect x="5px" y="45px" width="140px" height="140px" fill="red"/>
 28 <rect x="155px" y="45px" width="140px" height="140px" fill="red"/>
 29 <rect x="155px" y="215px" width="140px" height="140px" fill="red"/>
 30 <rect x="5px" y="215px" width="140px" height="140px" fill="red"/>
 31 </svg>
 32 <div id="maskedElement"></div>
 33 </body>
 34</html>

LayoutTests/css3/masking/mask-svg-no-fragmentId-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 </style>
 10 </head>
 11
 12 <body>
 13 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see 4 green rectangles and no red.</p>
 14 <p>This test references an external SVG without specifying a fragment id.</p>
 15 <svg width="300px" height="400px">
 16 <rect x="5px" y="45px" width="140px" height="140px" fill="green"/>
 17 <rect x="155px" y="45px" width="140px" height="140px" fill="green"/>
 18 <rect x="155px" y="215px" width="140px" height="140px" fill="green"/>
 19 <rect x="5px" y="215px" width="140px" height="140px" fill="green"/>
 20 </svg>
 21 </body>
 22</html>

LayoutTests/css3/masking/mask-svg-no-fragmentId-tiled-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #background
 10 {
 11 width: 400px;
 12 height: 500px;
 13 background-color: lightblue;
 14 }
 15 </style>
 16 </head>
 17
 18 <body>
 19 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a 4-rectangle green image painted tiled and no red.</p>
 20 <p>This test references an external SVG without specifying a fragment id and paints using multiple tiles.</p>
 21
 22 <div id="background">
 23 <svg id="redSvg" width="400px" height="500px">
 24 <rect x="5px" y="45px" width="140px" height="140px" fill="green"/>
 25 <rect x="155px" y="45px" width="140px" height="140px" fill="green"/>
 26 <rect x="305px" y="45px" width="95px" height="140px" fill="green"/>
 27 <rect x="155px" y="215px" width="140px" height="140px" fill="green"/>
 28 <rect x="305px" y="215px" width="95px" height="140px" fill="green"/>
 29 <rect x="5px" y="215px" width="140px" height="140px" fill="green"/>
 30 <rect x="5px" y="445px" width="140px" height="55px" fill="green"/>
 31 <rect x="155px" y="445px" width="140px" height="55px" fill="green"/>
 32 <rect x="305px" y="445px" width="95px" height="55px" fill="green"/>
 33 </svg>
 34 </div>
 35 </body>
 36</html>

LayoutTests/css3/masking/mask-svg-no-fragmentId-tiled.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #background
 10 {
 11 width: 400px;
 12 height: 500px;
 13 background-color: lightblue;
 14 }
 15 #maskedElement
 16 {
 17 width: 400px;
 18 height: 500px;
 19 background-color: green;
 20 -webkit-mask-image:url('resources/masks.svg');
 21 }
 22 #redSvg
 23 {
 24 position: absolute;
 25 }
 26 </style>
 27 </head>
 28
 29 <body>
 30 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a 4-rectangle green image painted tiled and no red.</p>
 31 <p>This test references an external SVG without specifying a fragment id and paints using multiple tiles.</p>
 32 <svg id="redSvg" width="400px" height="500px">
 33 <rect x="5px" y="45px" width="140px" height="140px" fill="red"/>
 34 <rect x="155px" y="45px" width="140px" height="140px" fill="red"/>
 35 <rect x="305px" y="45px" width="95px" height="140px" fill="red"/>
 36 <rect x="155px" y="215px" width="140px" height="140px" fill="red"/>
 37 <rect x="305px" y="215px" width="95px" height="140px" fill="red"/>
 38 <rect x="5px" y="215px" width="140px" height="140px" fill="red"/>
 39 <rect x="5px" y="445px" width="140px" height="55px" fill="red"/>
 40 <rect x="155px" y="445px" width="140px" height="55px" fill="red"/>
 41 <rect x="305px" y="445px" width="95px" height="55px" fill="red"/>
 42 </svg>
 43 <div id="background">
 44 <div id="maskedElement"></div>
 45 </div>
 46 </body>
 47</html>

LayoutTests/css3/masking/mask-svg-no-fragmentId.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 300px;
 12 height: 400px;
 13 background-color: green;
 14 -webkit-mask-image:url('resources/masks.svg');
 15 }
 16 #redSvg
 17 {
 18 position: absolute;
 19 }
 20 </style>
 21 </head>
 22
 23 <body>
 24 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see 4 green rectangles and no red.</p>
 25 <p>This test references an external SVG without specifying a fragment id.</p>
 26 <svg id="redSvg" width="300px" height="400px">
 27 <rect x="5px" y="45px" width="140px" height="140px" fill="red"/>
 28 <rect x="155px" y="45px" width="140px" height="140px" fill="red"/>
 29 <rect x="155px" y="215px" width="140px" height="140px" fill="red"/>
 30 <rect x="5px" y="215px" width="140px" height="140px" fill="red"/>
 31 </svg>
 32 <div id="maskedElement"></div>
 33 </body>
 34</html>

LayoutTests/css3/masking/mask-svg-script-entire-svg-to-mask-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 </style>
 10 </head>
 11 <body>
 12 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue inverted-L shape and no red.</p>
 13 <p>This test sets the mask-image via CSS to the entire SVG and then changes it to a &lt;mask&gt; element from the SVG via a script.</p>
 14 <svg width="300px" height="400px">
 15 <path fill="blue" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
 16 </svg>
 17 </body>
 18</html>

LayoutTests/css3/masking/mask-svg-script-entire-svg-to-mask.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 300px;
 12 height: 400px;
 13 background-color: green;
 14 -webkit-mask-image:url('resources/masks.svg');
 15 }
 16 #redSvg
 17 {
 18 position: absolute;
 19 }
 20 </style>
 21 </head>
 22
 23 <body>
 24 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue inverted-L shape and no red.</p>
 25 <p>This test sets the mask-image via CSS to the entire SVG and then changes it to a &lt;mask&gt; element from the SVG via a script.</p>
 26 <svg id="redSvg" width="300px" height="400px">
 27 <path fill="red" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
 28 </svg>
 29 <div id="maskedElement"></div>
 30
 31 <script>
 32 var maskedElement = document.getElementById("maskedElement");
 33 maskedElement.style.cssText += "-webkit-mask-image:url('resources/masks.svg#upperHalf');background-color: blue";
 34 </script>
 35 </body>
 36</html>

LayoutTests/css3/masking/mask-svg-script-mask-to-entire-svg-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 300px;
 12 height: 400px;
 13 background-color: blue;
 14 -webkit-mask-image:url('resources/masks.svg');
 15 }
 16 </style>
 17 </head>
 18 <body>
 19 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see four blue squares and no red.</p>
 20 <p>This test sets the mask-image via CSS to a &lt;mask&gt; element from an SVG file and then changes it to the entire SVG file via a script.</p>
 21 <div id="maskedElement"></div>
 22 </body>
 23</html>

LayoutTests/css3/masking/mask-svg-script-mask-to-entire-svg.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 300px;
 12 height: 400px;
 13 background-color: green;
 14 -webkit-mask-image:url('resources/masks.svg#lowerHalf');
 15 }
 16 #redSvg
 17 {
 18 position: absolute;
 19 }
 20 </style>
 21 </head>
 22
 23 <body>
 24 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see four blue squares and no red.</p>
 25 <p>This test sets the mask-image via CSS to a &lt;mask&gt; element from an SVG file and then changes it to the entire SVG file via a script.</p>
 26 <svg id="redSvg" width="300px" height="400px">
 27 <rect x="5px" y="45px" width="140px" height="140px" fill="red"/>
 28 <rect x="155px" y="45px" width="140px" height="140px" fill="red"/>
 29 <rect x="155px" y="215px" width="140px" height="140px" fill="red"/>
 30 <rect x="5px" y="215px" width="140px" height="140px" fill="red"/>
 31 </svg>
 32 <div id="maskedElement"></div>
 33
 34 <script>
 35 var maskedElement = document.getElementById("maskedElement");
 36 maskedElement.style.cssText += "-webkit-mask-image:url('resources/masks.svg');background-color:blue";
 37 </script>
 38 </body>
 39</html>

LayoutTests/css3/masking/mask-svg-script-mask-to-none-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 400px;
 12 height: 400px;
 13 background-color: blue;
 14 }
 15 </style>
 16 </head>
 17 <body>
 18 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue rectangle and no red.</p>
 19 <p>This test sets the mask-image via CSS to a &lt;mask&gt; element from an external SVG file and then changes it to 'none' via a script.</p>
 20 <div id="maskedElement"></div>
 21 </body>
 22</html>

LayoutTests/css3/masking/mask-svg-script-mask-to-none.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 400px;
 12 height: 400px;
 13 background-color: green;
 14 -webkit-mask-image:url('resources/masks.svg#lowerHalf');
 15 }
 16 #redElement
 17 {
 18 width: 400px;
 19 height: 400px;
 20 background-color: red;
 21 position: absolute;
 22 z-index: -1;
 23 }
 24 </style>
 25 </head>
 26
 27 <body>
 28 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue rectangle and no red.</p>
 29 <p>This test sets the mask-image via CSS to a &lt;mask&gt; element from an external SVG file and then changes it to 'none' via a script.</p>
 30 <div id="redElement"></div>
 31 <div id="maskedElement"></div>
 32 <script>
 33 var maskedElement = document.getElementById("maskedElement");
 34 maskedElement.style.cssText += "-webkit-mask-image:none;background-color: blue";
 35 </script>
 36 </body>
 37</html>

LayoutTests/css3/masking/mask-svg-script-mask-to-png-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 360px;
 12 height: 288px;
 13 background-color: blue;
 14 -webkit-mask-image:url('resources/circle.png');
 15 }
 16 </style>
 17 </head>
 18 <body>
 19 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue circle and no red.</p>
 20 <p>This test sets the mask-image via CSS to a &lt;mask&gt; element from an SVG file and then changes it to a PNG via a script.</p>
 21 <div id="maskedElement"></div>
 22 </body>
 23</html>

LayoutTests/css3/masking/mask-svg-script-mask-to-png.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 360px;
 12 height: 288px;
 13 background-color: red;
 14 -webkit-mask-image:url('resources/masks.svg#lowerHalf');
 15 }
 16 #redElement
 17 {
 18 position: absolute;
 19 width: 360px;
 20 height: 288px;
 21 background-color: red;
 22 -webkit-transform: scale(0.95, 0.95);
 23 -webkit-mask-image: url('resources/circle.png');
 24 }
 25 </style>
 26 </head>
 27
 28 <body>
 29 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue circle and no red.</p>
 30 <p>This test sets the mask-image via CSS to a &lt;mask&gt; element from an SVG file and then changes it to a PNG via a script.</p>
 31 <div id="redElement"></div>
 32 <div id="maskedElement"></div>
 33
 34 <script>
 35 var maskedElement = document.getElementById("maskedElement");
 36 maskedElement.style.cssText += "-webkit-mask-image:url('resources/circle.png');background-color: blue";
 37 </script>
 38 </body>
 39</html>

LayoutTests/css3/masking/mask-svg-script-none-to-mask-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 400px;
 12 height: 400px;
 13 background-color: blue;
 14 -webkit-mask-image:url('resources/masks.svg#upperHalf');
 15 }
 16 </style>
 17 </head>
 18 <body>
 19 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue inverted-L shape and no red.</p>
 20 <p>This test sets the mask-image value to a &lt;mask&gt; element from an external SVG via a script.</p>
 21 <div id="maskedElement"></div>
 22 </body>
 23</html>

LayoutTests/css3/masking/mask-svg-script-none-to-mask.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 400px;
 12 height: 400px;
 13 background-color: red;
 14 }
 15 #redSvg
 16 {
 17 position: absolute;
 18 }
 19 </style>
 20 </head>
 21
 22 <body>
 23 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue inverted-L shape and no red.</p>
 24 <p>This test sets the mask-image value to a &lt;mask&gt; element from an external SVG via a script.</p>
 25 <svg id="redSvg" width="300px" height="400px">
 26 <path fill="red" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
 27 </svg>
 28 <div id="maskedElement"></div>
 29
 30 <script>
 31 var maskedElement = document.getElementById("maskedElement");
 32 maskedElement.style.cssText += "-webkit-mask-image:url('resources/masks.svg#upperHalf');background-color: blue";
 33 </script>
 34 </body>
 35</html>

LayoutTests/css3/masking/mask-svg-script-none-to-png-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 280px;
 12 height: 210px;
 13 background-color: blue;
 14 -webkit-mask-image:url('resources/dice.png');
 15 -webkit-mask-source-type:luminance;
 16 }
 17 </style>
 18 </head>
 19 <body>
 20 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue-tinted image of 3 dice.</p>
 21 <p>This test sets the mask-image to a PNG image via a script.</p>
 22 <div id="maskedElement"></div>
 23 </body>
 24</html>

LayoutTests/css3/masking/mask-svg-script-none-to-png.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 280px;
 12 height: 210px;
 13 background-color: green;
 14 }
 15 </style>
 16 </head>
 17
 18 <body>
 19 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue-tinted image of 3 dice.</p>
 20 <p>This test sets the mask-image to a PNG image via a script.</p>
 21 <div id="maskedElement"></div>
 22 <script>
 23 var maskedElement = document.getElementById("maskedElement");
 24 maskedElement.style.cssText += "-webkit-mask-image:url('resources/dice.png');-webkit-mask-source-type:luminance;background-color:blue";
 25 </script>
 26 </body>
 27</html>

LayoutTests/css3/masking/mask-svg-script-png-to-mask-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 </style>
 10 </head>
 11 <body>
 12 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue inverted-L shape and no red.</p>
 13 <p>This test sets the mask-image via CSS to a PNG and then changes it to a &lt;mask&gt; element from an SVG file via a script.</p>
 14 <svg width="300px" height="400px">
 15 <path fill="blue" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
 16 </svg>
 17 </body>
 18</html>

LayoutTests/css3/masking/mask-svg-script-png-to-mask.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 300px;
 12 height: 400px;
 13 background-color: green;
 14 -webkit-mask-image:url('resources/circle.png');
 15 }
 16 #redSvg
 17 {
 18 position: absolute;
 19 }
 20 </style>
 21 </head>
 22
 23 <body>
 24 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue inverted-L shape and no red.</p>
 25 <p>This test sets the mask-image via CSS to a PNG and then changes it to a &lt;mask&gt; element from an SVG file via a script.</p>
 26 <svg id="redSvg" width="300px" height="400px">
 27 <path fill="red" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
 28 </svg>
 29 <div id="maskedElement"></div>
 30
 31 <script>
 32 var maskedElement = document.getElementById("maskedElement");
 33 maskedElement.style.cssText += "-webkit-mask-image:url('resources/masks.svg#upperHalf');background-color: blue";
 34 </script>
 35 </body>
 36</html>

LayoutTests/css3/masking/mask-svg-script-png-to-none-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 280px;
 12 height: 210px;
 13 background-color: blue;
 14 }
 15 </style>
 16 </head>
 17 <body>
 18 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a simple blue rectangle.</p>
 19 <p>This test sets the mask-image via CSS to a PNG image and then changes it to 'none' via a script.</p>
 20 <div id="maskedElement"></div>
 21 </body>
 22</html>

LayoutTests/css3/masking/mask-svg-script-png-to-none.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <style>
 5 p
 6 {
 7 margin: 0px;
 8 }
 9 #maskedElement
 10 {
 11 width: 280px;
 12 height: 210px;
 13 background-color: green;
 14 -webkit-mask-image:url('resources/dice.png');
 15 -webkit-mask-source-type: luminance;
 16 }
 17 </style>
 18 </head>
 19
 20 <body>
 21 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a simple blue rectangle.</p>
 22 <p>This test sets the mask-image via CSS to a PNG image and then changes it to 'none' via a script.</p>
 23 <div id="maskedElement"></div>
 24 <script>
 25 var maskedElement = document.getElementById("maskedElement");
 26 maskedElement.style.cssText += "-webkit-mask-image:none;background-color: blue";
 27 </script>
 28 </body>
 29</html>

LayoutTests/css3/masking/resources/masks.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
 3<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 width="300px" height="400px" viewBox="0 0 300 400" enable-background="new 0 0 300 400" xml:space="preserve">
 6<defs>
 7 <mask id="upperHalf" maskUnits="objectBoundingBox">
 8 <path fill="#FFFFFF" d="M80,20 L280,20 L280,380 L240,380 L240,60 L80,60 L80,20"/>
 9 </mask>
 10 <mask id="lowerHalf" maskUnits="objectBoundingBox">
 11 <path fill="#FFFFFF" d="M20,20 L60,20 L60,340 L220,340 L220,380 L20,380 L20,20"/>
 12 </mask>
 13 <mask id="animatedCircle" maskUnits="objectBoundingBox">
 14 <circle cx="150" cy="150" r="40" fill="white">
 15 <animate attributeName="r" from="40" to="120" dur="10s" repeatCount="indefinite"/>
 16 </circle>
 17 </mask>
 18</defs>
 19
 20<g>
 21 <rect x="5px" y="45px" width="140px" height="140px" fill="#C1553B"/>
 22 <rect x="155px" y="45px" width="140px" height="140px" fill="#71E5FF"/>
 23 <rect x="155px" y="215px" width="140px" height="140px" fill="#404041"/>
 24 <rect x="5px" y="215px" width="140px" height="140px" fill="#77D091"/>
 25</g>
 26
 27</svg>

Source/WebCore/css/CSSComputedStyleDeclaration.cpp

@@PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
17651765
17661766 case CSSPropertyBackgroundColor:
17671767 return cssValuePool().createColorValue(m_allowVisitedStyle? style->visitedDependentColor(CSSPropertyBackgroundColor).rgb() : style->backgroundColor().rgb());
1768  case CSSPropertyBackgroundImage:
1769  case CSSPropertyWebkitMaskImage: {
1770  const FillLayer* layers = propertyID == CSSPropertyWebkitMaskImage ? style->maskLayers() : style->backgroundLayers();
 1768 case CSSPropertyBackgroundImage: {
 1769 const FillLayer* layers = style->backgroundLayers();
17711770 if (!layers)
17721771 return cssValuePool().createIdentifierValue(CSSValueNone);
1773 
 1772
17741773 if (!layers->next()) {
17751774 if (layers->image())
17761775 return layers->image()->cssValue();
1777 
 1776
17781777 return cssValuePool().createIdentifierValue(CSSValueNone);
17791778 }
1780 
 1779
17811780 RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
17821781 for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next()) {
17831782 if (currLayer->image())

@@PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
17871786 }
17881787 return list.release();
17891788 }
 1789 case CSSPropertyWebkitMaskImage: {
 1790 const FillLayer* layers = style->maskLayers();
 1791 if (!layers)
 1792 return cssValuePool().createIdentifierValue(CSSValueNone);
 1793
 1794 if (!layers->next()) {
 1795 if (layers->maskImage().get())
 1796 return layers->maskImage()->cssValue();
 1797
 1798 return cssValuePool().createIdentifierValue(CSSValueNone);
 1799 }
 1800
 1801 RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
 1802 for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next()) {
 1803 if (currLayer->maskImage().get())
 1804 list->append(*currLayer->maskImage()->cssValue());
 1805 else
 1806 list->append(cssValuePool().createIdentifierValue(CSSValueNone));
 1807 }
 1808 return list.release();
 1809 }
17901810 case CSSPropertyBackgroundSize:
17911811 case CSSPropertyWebkitBackgroundSize:
17921812 case CSSPropertyWebkitMaskSize: {

Source/WebCore/css/CSSParser.cpp

8383#include "TextEncoding.h"
8484#include "WebKitCSSFilterValue.h"
8585#include "WebKitCSSRegionRule.h"
 86#include "WebKitCSSResourceValue.h"
8687#include "WebKitCSSTransformValue.h"
8788#include <bitset>
8889#include <limits.h>

@@bool CSSParser::parseFillShorthand(CSSPropertyID propId, const CSSPropertyID* pr
33583359 RefPtr<CSSValue> val2;
33593360 CSSPropertyID propId1, propId2;
33603361 CSSParserValue& parserValue = *m_valueList->current();
 3362
33613363 if (parseFillProperty(properties[i], propId1, propId2, val1, val2)) {
33623364 parsedProperty[i] = found = true;
33633365 addFillValue(values[i], val1.releaseNonNull());

@@bool CSSParser::parseFillProperty(CSSPropertyID propId, CSSPropertyID& propId1,
44464448 }
44474449 break;
44484450 case CSSPropertyBackgroundImage:
4449  case CSSPropertyWebkitMaskImage:
44504451 if (parseFillImage(*m_valueList, currValue))
44514452 m_valueList->next();
44524453 break;
 4454 case CSSPropertyWebkitMaskImage:
 4455 if (parseMaskImage(*m_valueList, currValue))
 4456 m_valueList->next();
 4457 break;
44534458 case CSSPropertyWebkitBackgroundClip:
44544459 case CSSPropertyWebkitBackgroundOrigin:
44554460 case CSSPropertyWebkitMaskClip:

@@bool CSSParser::parseFilter(CSSParserValueList& valueList, RefPtr<CSSValue>& res
94279432 return true;
94289433}
94299434
 9435bool CSSParser::parseMaskImage(CSSParserValueList& valueList, RefPtr<CSSValue>& outValue)
 9436{
 9437 outValue = nullptr;
 9438 CSSParserValue* value = valueList.current();
 9439 if (value->id == CSSValueNone)
 9440 outValue = WebKitCSSResourceValue::create(cssValuePool().createIdentifierValue(CSSValueNone));
 9441 else if (value->unit == CSSPrimitiveValue::CSS_URI)
 9442 outValue = WebKitCSSResourceValue::create(CSSPrimitiveValue::create(completeURL(value->string), CSSPrimitiveValue::CSS_URI));
 9443 else {
 9444 RefPtr<CSSValue> fillImageValue;
 9445 if (parseFillImage(valueList, fillImageValue))
 9446 outValue = WebKitCSSResourceValue::create(fillImageValue);
 9447 }
 9448
 9449 return (outValue.get());
 9450}
 9451
94309452#if ENABLE(CSS_REGIONS)
94319453static bool validFlowName(const String& flowName)
94329454{

Source/WebCore/css/CSSParser.h

@@public:
117117
118118 PassRefPtr<CSSValue> parseBackgroundColor();
119119
 120 // FIXME: Maybe these two methods could be combined into one.
 121 bool parseMaskImage(CSSParserValueList&, RefPtr<CSSValue>&);
120122 bool parseFillImage(CSSParserValueList&, RefPtr<CSSValue>&);
121123
122124 enum FillPositionFlag { InvalidFillPosition = 0, AmbiguousFillPosition = 1, XFillPosition = 2, YFillPosition = 4 };

Source/WebCore/css/DeprecatedStyleBuilder.cpp

@@DeprecatedStyleBuilder::DeprecatedStyleBuilder()
10401040 setPropertyHandler(CSSPropertyWebkitFontVariantLigatures, ApplyPropertyFontVariantLigatures::createHandler());
10411041 setPropertyHandler(CSSPropertyWebkitMaskClip, ApplyPropertyFillLayer<EFillBox, CSSPropertyWebkitMaskClip, MaskFillLayer, &RenderStyle::accessMaskLayers, &RenderStyle::maskLayers, &FillLayer::isClipSet, &FillLayer::clip, &FillLayer::setClip, &FillLayer::clearClip, &FillLayer::initialFillClip, &CSSToStyleMap::mapFillClip>::createHandler());
10421042 setPropertyHandler(CSSPropertyWebkitMaskComposite, ApplyPropertyFillLayer<CompositeOperator, CSSPropertyWebkitMaskComposite, MaskFillLayer, &RenderStyle::accessMaskLayers, &RenderStyle::maskLayers, &FillLayer::isCompositeSet, &FillLayer::composite, &FillLayer::setComposite, &FillLayer::clearComposite, &FillLayer::initialFillComposite, &CSSToStyleMap::mapFillComposite>::createHandler());
1043  setPropertyHandler(CSSPropertyWebkitMaskImage, ApplyPropertyFillLayer<StyleImage*, CSSPropertyWebkitMaskImage, MaskFillLayer, &RenderStyle::accessMaskLayers, &RenderStyle::maskLayers, &FillLayer::isImageSet, &FillLayer::image, &FillLayer::setImage, &FillLayer::clearImage, &FillLayer::initialFillImage, &CSSToStyleMap::mapFillImage>::createHandler());
10441043 setPropertyHandler(CSSPropertyWebkitMaskOrigin, ApplyPropertyFillLayer<EFillBox, CSSPropertyWebkitMaskOrigin, MaskFillLayer, &RenderStyle::accessMaskLayers, &RenderStyle::maskLayers, &FillLayer::isOriginSet, &FillLayer::origin, &FillLayer::setOrigin, &FillLayer::clearOrigin, &FillLayer::initialFillOrigin, &CSSToStyleMap::mapFillOrigin>::createHandler());
10451044 setPropertyHandler(CSSPropertyWebkitMaskPositionX, ApplyPropertyFillLayer<Length, CSSPropertyWebkitMaskPositionX, MaskFillLayer, &RenderStyle::accessMaskLayers, &RenderStyle::maskLayers, &FillLayer::isXPositionSet, &FillLayer::xPosition, &FillLayer::setXPosition, &FillLayer::clearXPosition, &FillLayer::initialFillXPosition, &CSSToStyleMap::mapFillXPosition>::createHandler());
10461045 setPropertyHandler(CSSPropertyWebkitMaskPositionY, ApplyPropertyFillLayer<Length, CSSPropertyWebkitMaskPositionY, MaskFillLayer, &RenderStyle::accessMaskLayers, &RenderStyle::maskLayers, &FillLayer::isYPositionSet, &FillLayer::yPosition, &FillLayer::setYPosition, &FillLayer::clearYPosition, &FillLayer::initialFillYPosition, &CSSToStyleMap::mapFillYPosition>::createHandler());

Source/WebCore/css/StyleResolver.cpp

@@void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
25352535 }
25362536#endif
25372537
 2538 case CSSPropertyWebkitMaskImage: {
 2539 Vector<RefPtr<MaskImageOperation>> operations;
 2540 if (createMaskImageOperations(value, operations))
 2541 state.style()->setMaskImage(operations);
 2542
 2543 return;
 2544 }
 2545
25382546#if ENABLE(CSS_GRID_LAYOUT)
25392547 case CSSPropertyWebkitGridAutoColumns: {
25402548 HANDLE_INHERIT_AND_INITIAL(gridAutoColumns, GridAutoColumns);

@@void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
29612969 case CSSPropertyWebkitMaskBoxImageWidth:
29622970 case CSSPropertyWebkitMaskClip:
29632971 case CSSPropertyWebkitMaskComposite:
2964  case CSSPropertyWebkitMaskImage:
29652972 case CSSPropertyWebkitMaskOrigin:
29662973 case CSSPropertyWebkitMaskPositionX:
29672974 case CSSPropertyWebkitMaskPositionY:

@@void StyleResolver::loadPendingSVGDocuments()
33123319 // style is NULL. We don't know exactly why this happens. Our guess is
33133320 // reentering styleForElement().
33143321 ASSERT(state.style());
3315  if (!state.style() || !state.style()->hasFilter() || state.filtersWithPendingSVGDocuments().isEmpty())
 3322 if (!state.style())
 3323 return;
 3324
 3325 bool hasFilters = (state.style()->hasFilter() && !state.filtersWithPendingSVGDocuments().isEmpty());
 3326 bool hasMasks = (state.style()->hasMask() && !state.maskImagesWithPendingSVGDocuments().isEmpty());
 3327
 3328 if (!hasFilters && !hasMasks)
33163329 return;
33173330
33183331 CachedResourceLoader* cachedResourceLoader = state.document().cachedResourceLoader();
3319  for (auto& filterOperation : state.filtersWithPendingSVGDocuments())
3320  filterOperation->getOrCreateCachedSVGDocumentReference()->load(cachedResourceLoader);
 3332
 3333 if (hasFilters) {
 3334 for (auto& filterOperation : state.filtersWithPendingSVGDocuments())
 3335 filterOperation->getOrCreateCachedSVGDocumentReference()->load(cachedResourceLoader);
 3336
 3337 state.filtersWithPendingSVGDocuments().clear();
 3338 }
 3339
 3340 if (hasMasks) {
 3341 for (auto& maskImageOperation : state.maskImagesWithPendingSVGDocuments())
 3342 maskImageOperation->ensureCachedSVGDocumentReference()->load(cachedResourceLoader);
33213343
3322  state.filtersWithPendingSVGDocuments().clear();
 3344 state.maskImagesWithPendingSVGDocuments().clear();
 3345 }
33233346}
33243347
33253348bool StyleResolver::createFilterOperations(CSSValue* inValue, FilterOperations& outOperations)

@@bool StyleResolver::createMaskImageOperations(CSSValue* inValue, Vector<RefPtr<M
34673490 if (!inValue)
34683491 return false;
34693492
3470  ASSERT(is<CSSValueList>(*inValue));
 3493 RefPtr<WebKitCSSResourceValue> maskImageValue;
 3494 RefPtr<CSSValueList> maskImagesList;
 3495 CSSValueList::iterator listIterator;
 3496 if (is<WebKitCSSResourceValue>(*inValue))
 3497 maskImageValue = downcast<WebKitCSSResourceValue>(inValue);
 3498 else if (is<CSSValueList>(*inValue)) {
 3499 maskImagesList = downcast<CSSValueList>(inValue);
 3500 listIterator = maskImagesList->begin();
 3501 if (listIterator != maskImagesList->end())
 3502 maskImageValue = &downcast<WebKitCSSResourceValue>(listIterator->get());
 3503 }
34713504
3472  for (auto& currValue : downcast<CSSValueList>(*inValue)) {
3473  if (!is<WebKitCSSResourceValue>(currValue.get()))
3474  continue;
3475 
3476  WebKitCSSResourceValue& maskImageValue = downcast<WebKitCSSResourceValue>(currValue.get());
3477  RefPtr<CSSValue> maskInnerValue = maskImageValue.innerValue();
 3505 while (maskImageValue.get()) {
 3506 RefPtr<CSSValue> maskInnerValue = maskImageValue->innerValue();
34783507 RefPtr<MaskImageOperation> newMaskImage;
3479 
 3508
34803509 if (is<CSSPrimitiveValue>(maskInnerValue.get())) {
34813510 RefPtr<CSSPrimitiveValue> primitiveValue = downcast<CSSPrimitiveValue>(maskInnerValue.get());
34823511 if (primitiveValue->isValueID() && primitiveValue->getValueID() == CSSValueNone)

@@bool StyleResolver::createMaskImageOperations(CSSValue* inValue, Vector<RefPtr<M
34863515 URL url = m_state.document().completeURL(cssUrl);
34873516
34883517 bool isExternalDocument = (SVGURIReference::isExternalURIReference(cssUrl, m_state.document()));
3489  newMaskImage = MaskImageOperation::create(&maskImageValue, cssUrl, url.fragmentIdentifier(), isExternalDocument, m_state.document().cachedResourceLoader());
 3518 newMaskImage = MaskImageOperation::create(maskImageValue, cssUrl, url.fragmentIdentifier(), isExternalDocument, m_state.document().cachedResourceLoader());
34903519 if (isExternalDocument)
34913520 m_state.maskImagesWithPendingSVGDocuments().append(newMaskImage);
34923521 }

@@bool StyleResolver::createMaskImageOperations(CSSValue* inValue, Vector<RefPtr<M
35013530 newMaskImage = MaskImageOperation::create();
35023531
35033532 outOperations.append(newMaskImage);
 3533
 3534 if (maskImagesList.get()) {
 3535 listIterator++;
 3536 maskImageValue = (listIterator != maskImagesList->end() ? &downcast<WebKitCSSResourceValue>(listIterator->get()) : nullptr);
 3537 } else
 3538 maskImageValue = nullptr;
35043539 }
35053540
35063541 return true;

@@void StyleResolver::loadPendingImages()
36243659 }
36253660 case CSSPropertyWebkitMaskImage: {
36263661 for (FillLayer* maskLayer = m_state.style()->accessMaskLayers(); maskLayer; maskLayer = maskLayer->next()) {
3627  auto* styleImage = maskLayer->image();
 3662 RefPtr<MaskImageOperation> maskImage = maskLayer->maskImage();
 3663 auto* styleImage = maskImage.get() ? maskImage->image() : nullptr;
36283664 if (is<StylePendingImage>(styleImage))
3629  maskLayer->setImage(loadPendingImage(downcast<StylePendingImage>(*styleImage)));
 3665 maskImage->setImage(loadPendingImage(downcast<StylePendingImage>(*styleImage)));
36303666 }
36313667 break;
36323668 }

Source/WebCore/page/animation/CSSPropertyAnimation.cpp

4242#include "ClipPathOperation.h"
4343#include "FloatConversion.h"
4444#include "IdentityTransformOperation.h"
 45#include "MaskImageOperation.h"
4546#include "Matrix3DTransformOperation.h"
4647#include "MatrixTransformOperation.h"
4748#include "RenderBox.h"

@@static inline PassRefPtr<StyleImage> blendFunc(const AnimationBase* anim, StyleI
341342 return to;
342343}
343344
 345static inline PassRefPtr<MaskImageOperation> blendFunc(const AnimationBase* anim, const RefPtr<MaskImageOperation> from, const RefPtr<MaskImageOperation> to, double progress)
 346{
 347 if (!from.get() || !to.get())
 348 return to;
 349
 350 // Only animates between masks using images (PNG, entire SVG, generated image).
 351 // It does not animate between <mask> elements (file.svg#identifier).
 352 if (from->image() && to->image())
 353 return MaskImageOperation::create(blendFunc(anim, from->image(), to->image(), progress));
 354
 355 return to;
 356}
 357
344358static inline NinePieceImage blendFunc(const AnimationBase* anim, const NinePieceImage& from, const NinePieceImage& to, double progress)
345359{
346360 if (!from.hasImage() || !to.hasImage())

@@public:
500514 }
501515};
502516
 517class MaskImagePropertyWrapper : public PropertyWrapper<const RefPtr<MaskImageOperation>> {
 518public:
 519 MaskImagePropertyWrapper()
 520 : PropertyWrapper<const RefPtr<MaskImageOperation>>(CSSPropertyWebkitMaskImage, &RenderStyle::maskImage, &RenderStyle::setMaskImage)
 521 {
 522 }
 523
 524 virtual bool equals(const RenderStyle* a, const RenderStyle* b) const
 525 {
 526 // If the style pointers are the same, don't bother doing the test.
 527 // If either is null, return false. If both are null, return true.
 528 if (a == b)
 529 return true;
 530 if (!a || !b)
 531 return false;
 532
 533 const RefPtr<MaskImageOperation> maskImageA = (a->*m_getter)();
 534 const RefPtr<MaskImageOperation> maskImageB = (b->*m_getter)();
 535 StyleImage* styleImageA = (maskImageA ? maskImageA->image() : nullptr);
 536 StyleImage* styleImageB = (maskImageB ? maskImageB->image() : nullptr);
 537 return StyleImage::imagesEquivalent(styleImageA, styleImageB);
 538 }
 539};
 540
503541class PropertyWrapperColor : public PropertyWrapperGetter<Color> {
504542public:
505543 PropertyWrapperColor(CSSPropertyID prop, Color (RenderStyle::*getter)() const, void (RenderStyle::*setter)(const Color&))

@@CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap()
11521190
11531191 new FillLayersPropertyWrapper(CSSPropertyBackgroundImage, &RenderStyle::backgroundLayers, &RenderStyle::accessBackgroundLayers),
11541192 new StyleImagePropertyWrapper(CSSPropertyListStyleImage, &RenderStyle::listStyleImage, &RenderStyle::setListStyleImage),
1155  new StyleImagePropertyWrapper(CSSPropertyWebkitMaskImage, &RenderStyle::maskImage, &RenderStyle::setMaskImage),
 1193 new MaskImagePropertyWrapper(),
11561194
11571195 new StyleImagePropertyWrapper(CSSPropertyBorderImageSource, &RenderStyle::borderImageSource, &RenderStyle::setBorderImageSource),
11581196 new LengthPropertyWrapper<LengthBox>(CSSPropertyBorderImageSlice, &RenderStyle::borderImageSlices, &RenderStyle::setBorderImageSlices),

Source/WebCore/platform/ScrollView.cpp

@@void ScrollView::positionScrollbarLayers()
10721072void ScrollView::repaintContentRectangle(const IntRect& rect)
10731073{
10741074 IntRect paintRect = rect;
1075  if (clipsRepaints() && !paintsEntireContents())
1076  paintRect.intersect(visibleContentRect(LegacyIOSDocumentVisibleRect));
 1075 if (clipsRepaints() && !paintsEntireContents()) {
 1076 IntRect visibleRect = visibleContentRect(LegacyIOSDocumentVisibleRect);
 1077
 1078 // When using a mask from an SVG as an element's maskImage, the visibleContentRect
 1079 // of the SVG document will be empty, but the element using it as a mask still
 1080 // needs to be repainted.
 1081 if (!containsSVGDocument() || !visibleRect.isEmpty())
 1082 paintRect.intersect(visibleRect);
 1083 }
 1084
10771085 if (paintRect.isEmpty())
10781086 return;
10791087

Source/WebCore/platform/graphics/MaskImageOperation.cpp

@@MaskImageOperation::MaskImageOperation()
8282
8383MaskImageOperation::~MaskImageOperation()
8484{
 85 setRenderLayerImageClient(nullptr);
8586}
8687
8788bool MaskImageOperation::isCSSValueNone() const

Source/WebCore/rendering/RenderBox.cpp

@@LayoutRect RenderBox::maskClipRect()
15301530 LayoutRect result;
15311531 LayoutRect borderBox = borderBoxRect();
15321532 for (const FillLayer* maskLayer = style().maskLayers(); maskLayer; maskLayer = maskLayer->next()) {
1533  if (maskLayer->image()) {
 1533 if (maskLayer->maskImage()) {
15341534 BackgroundImageGeometry geometry;
15351535 // Masks should never have fixed attachment, so it's OK for paintContainer to be null.
15361536 calculateBackgroundImageGeometry(0, maskLayer, borderBox, geometry);

Source/WebCore/rendering/RenderBox.h

@@public:
175175 // Bounds of the outline box in absolute coords. Respects transforms
176176 virtual LayoutRect outlineBoundsForRepaint(const RenderLayerModelObject* /*repaintContainer*/, const RenderGeometryMap*) const override final;
177177 virtual void addFocusRingRects(Vector<IntRect>&, const LayoutPoint& additionalOffset, const RenderLayerModelObject* paintContainer = 0) override;
 178
 179 virtual FloatRect repaintRectInLocalCoordinates() const override { return borderBoxRect(); }
 180 virtual FloatRect objectBoundingBox() const override { return borderBoxRect(); }
178181
179182 // Use this with caution! No type checking is done!
180183 RenderBox* previousSiblingBox() const;

Source/WebCore/rendering/RenderBoxModelObject.cpp

2727#include "RenderBoxModelObject.h"
2828
2929#include "BorderEdge.h"
 30#include "CachedImage.h"
 31#include "CachedSVGDocument.h"
3032#include "FloatRoundedRect.h"
3133#include "Frame.h"
3234#include "FrameView.h"

4749#include "RenderNamedFlowFragment.h"
4850#include "RenderNamedFlowThread.h"
4951#include "RenderRegion.h"
 52#include "RenderSVGResourceMasker.h"
5053#include "RenderTable.h"
5154#include "RenderTableRow.h"
5255#include "RenderText.h"
5356#include "RenderTextFragment.h"
5457#include "RenderView.h"
 58#include "SVGImageForContainer.h"
 59#include "SVGSVGElement.h"
5560#include "ScrollingConstraints.h"
5661#include "Settings.h"
 62#include "StyleCachedImage.h"
5763#include "TransformState.h"
5864#include <wtf/NeverDestroyed.h>
5965

@@void RenderBoxModelObject::paintFillLayerExtended(const PaintInfo& paintInfo, co
676682 FloatRect pixelSnappedRect = snapRectToDevicePixels(rect, deviceScaleFactor);
677683
678684 // Fast path for drawing simple color backgrounds.
679  if (!isRoot && !clippedWithLocalScrolling && !shouldPaintBackgroundImage && isBorderFill && !bgLayer->next()) {
 685 if (!isRoot && !clippedWithLocalScrolling && !shouldPaintBackgroundImage && isBorderFill && !bgLayer->hasMaskImage() && !bgLayer->next()) {
680686 if (!colorVisible)
681687 return;
682688

@@void RenderBoxModelObject::paintFillLayerExtended(const PaintInfo& paintInfo, co
837843 }
838844
839845 // no progressive loading of the background image
840  if (!baseBgColorOnly && shouldPaintBackgroundImage) {
 846 if (!baseBgColorOnly && (shouldPaintBackgroundImage || bgLayer->hasMaskImage())) {
841847 BackgroundImageGeometry geometry;
 848 RefPtr<Image> image;
842849 calculateBackgroundImageGeometry(paintInfo.paintContainer, bgLayer, scrolledPaintRect, geometry, backgroundObject);
843850 geometry.clip(LayoutRect(pixelSnappedRect));
844  if (!geometry.destRect().isEmpty()) {
845  CompositeOperator compositeOp = op == CompositeSourceOver ? bgLayer->composite() : op;
846  auto clientForBackgroundImage = backgroundObject ? backgroundObject : this;
847  RefPtr<Image> image = bgImage->image(clientForBackgroundImage, geometry.tileSize());
848  context->setDrawLuminanceMask(bgLayer->maskSourceType() == MaskLuminance);
849  bool useLowQualityScaling = shouldPaintAtLowQuality(context, image.get(), bgLayer, geometry.tileSize());
 851 if (bgImage)
 852 image = bgImage->image(backgroundObject ? backgroundObject : this, geometry.tileSize());
 853
 854 if (!image.get() && bgLayer->hasMaskImage()) {
 855 const RefPtr<MaskImageOperation>& maskImageOperation = bgLayer->maskImage();
 856 if (StyleImage* styleImage = maskImageOperation->image())
 857 image = styleImage->image(backgroundObject ? backgroundObject : this, geometry.tileSize());
 858
850859 if (image.get())
851  image->setSpaceSize(geometry.spaceSize());
852  context->drawTiledImage(image.get(), style().colorSpace(), geometry.destRect(), geometry.relativePhase(), geometry.tileSize(), ImagePaintingOptions(compositeOp, bgLayer->blendMode(), ImageOrientationDescription(), useLowQualityScaling));
 860 shouldPaintBackgroundImage = true;
 861 }
 862
 863 if (!geometry.destRect().isEmpty()) {
 864 bool didPaintCustomMask = false;
 865 CompositeOperator compositeOp = (op == CompositeSourceOver ? bgLayer->composite() : op);
 866 if (!image.get() && bgLayer->hasMaskImage())
 867 didPaintCustomMask = bgLayer->maskImage()->drawMask(*this, geometry, context, compositeOp);
 868
 869 if (!didPaintCustomMask && shouldPaintBackgroundImage) {
 870 context->setDrawLuminanceMask(bgLayer->maskSourceType() == MaskLuminance);
 871 bool useLowQualityScaling = shouldPaintAtLowQuality(context, image.get(), bgLayer, geometry.tileSize());
 872 if (image.get())
 873 image->setSpaceSize(geometry.spaceSize());
 874 context->drawTiledImage(image.get(), style().colorSpace(), geometry.destRect(), geometry.relativePhase(), geometry.tileSize(), ImagePaintingOptions(compositeOp, bgLayer->blendMode(), ImageOrientationDescription(), useLowQualityScaling));
 875 }
853876 }
854877 }
855878

@@LayoutSize RenderBoxModelObject::calculateImageIntrinsicDimensions(StyleImage* i
951974
952975LayoutSize RenderBoxModelObject::calculateFillTileSize(const FillLayer* fillLayer, const LayoutSize& positioningAreaSize) const
953976{
954  StyleImage* image = fillLayer->image();
 977 StyleImage* image = fillLayer->imageOrMaskImage();
955978 EFillSizeType type = fillLayer->size().type;
956979
957  LayoutSize imageIntrinsicSize = calculateImageIntrinsicDimensions(image, positioningAreaSize, ScaleByEffectiveZoom);
958  imageIntrinsicSize.scale(1 / image->imageScaleFactor(), 1 / image->imageScaleFactor());
 980 LayoutSize imageIntrinsicSize;
 981 if (image) {
 982 imageIntrinsicSize = calculateImageIntrinsicDimensions(image, positioningAreaSize, ScaleByEffectiveZoom);
 983 imageIntrinsicSize.scale(1 / image->imageScaleFactor(), 1 / image->imageScaleFactor());
 984 } else
 985 imageIntrinsicSize = positioningAreaSize;
 986
959987 switch (type) {
960988 case SizeLength: {
961989 LayoutSize tileSize = positioningAreaSize;

@@void RenderBoxModelObject::calculateBackgroundImageGeometry(const RenderLayerMod
11511179
11521180 auto clientForBackgroundImage = backgroundObject ? backgroundObject : this;
11531181 LayoutSize fillTileSize = calculateFillTileSize(fillLayer, positioningAreaSize);
1154  fillLayer->image()->setContainerSizeForRenderer(clientForBackgroundImage, fillTileSize, style().effectiveZoom());
 1182 if (StyleImage* layerImage = fillLayer->imageOrMaskImage())
 1183 layerImage->setContainerSizeForRenderer(clientForBackgroundImage, fillTileSize, style().effectiveZoom());
 1184
11551185 geometry.setTileSize(fillTileSize);
11561186
11571187 EFillRepeat backgroundRepeatX = fillLayer->repeatX();

Source/WebCore/rendering/RenderElement.cpp

@@RenderElement::~RenderElement()
116116 for (const FillLayer* maskLayer = m_style->maskLayers(); maskLayer; maskLayer = maskLayer->next()) {
117117 if (StyleImage* maskImage = maskLayer->image())
118118 maskImage->removeClient(this);
 119 else if (maskLayer->maskImage().get())
 120 maskLayer->maskImage()->removeRendererImageClient(this);
119121 }
120122
121123 if (StyleImage* borderImage = m_style->borderImage().image())

@@inline bool RenderElement::shouldRepaintForStyleDifference(StyleDifference diff)
322324void RenderElement::updateFillImages(const FillLayer* oldLayers, const FillLayer* newLayers)
323325{
324326 // Optimize the common case
325  if (oldLayers && !oldLayers->next() && newLayers && !newLayers->next() && (oldLayers->image() == newLayers->image()))
 327 if (oldLayers && !oldLayers->next() && newLayers && !newLayers->next() && oldLayers->image() == newLayers->image() && oldLayers->maskImage() == newLayers->maskImage())
326328 return;
327329
328330 // Go through the new layers and addClients first, to avoid removing all clients of an image.
329331 for (const FillLayer* currNew = newLayers; currNew; currNew = currNew->next()) {
330  if (currNew->image())
331  currNew->image()->addClient(this);
 332 if (StyleImage* image = currNew->image())
 333 image->addClient(this);
 334 else if (currNew->maskImage().get())
 335 currNew->maskImage()->addRendererImageClient(this);
332336 }
333337
334338 for (const FillLayer* currOld = oldLayers; currOld; currOld = currOld->next()) {
335  if (currOld->image())
336  currOld->image()->removeClient(this);
 339 if (StyleImage* image = currOld->image())
 340 image->removeClient(this);
 341 else if (currOld->maskImage().get())
 342 currOld->maskImage()->removeRendererImageClient(this);
337343 }
338344}
339345

Source/WebCore/rendering/RenderLayer.cpp

@@void RenderLayer::styleChanged(StyleDifference diff, const RenderStyle* oldStyle
64996499 updateBlendMode();
65006500#endif
65016501 updateOrRemoveFilterClients();
 6502 updateOrRemoveMaskImageClients();
65026503
65036504 updateNeedsCompositedScrolling();
65046505

@@void RenderLayer::updateOrRemoveFilterClients()
66536654 filterInfo->removeReferenceFilterClients();
66546655}
66556656
 6657void RenderLayer::updateOrRemoveMaskImageClients()
 6658{
 6659 if (renderer().style().maskImage().get())
 6660 MaskImageInfo::get(*this).updateMaskImageClients();
 6661 else if (MaskImageInfo* maskImageInfo = MaskImageInfo::getIfExists(*this))
 6662 maskImageInfo->removeMaskImageClients();
 6663}
 6664
66566665void RenderLayer::updateOrRemoveFilterEffectRenderer()
66576666{
66586667 // FilterEffectRenderer is only used to render the filters in software mode,

Source/WebCore/rendering/RenderLayer.h

@@private:
11271127 void updateOrRemoveFilterClients();
11281128 void updateOrRemoveFilterEffectRenderer();
11291129
 1130 void updateOrRemoveMaskImageClients();
 1131
11301132#if ENABLE(CSS_COMPOSITING)
11311133 void updateAncestorChainHasBlendingDescendants();
11321134 void dirtyAncestorChainHasBlendingDescendants();

Source/WebCore/rendering/style/RenderStyle.cpp

@@bool RenderStyle::diffRequiresLayerRepaint(const RenderStyle& style, bool isComp
829829
830830 return false;
831831}
 832
 833void RenderStyle::setMaskImage(const Vector<RefPtr<MaskImageOperation>>& ops)
 834{
 835 FillLayer* curLayer = &rareNonInheritedData.access()->m_mask;
 836 while (curLayer) {
 837 curLayer->setMaskImage(nullptr);
 838 curLayer = curLayer->next();
 839 }
 840
 841 curLayer = &rareNonInheritedData.access()->m_mask;
 842 FillLayer* prevLayer = nullptr;
 843 for (auto& maskImage : ops) {
 844 if (!curLayer) {
 845 prevLayer->setNext(std::make_unique<FillLayer>(MaskFillLayer));
 846 curLayer = prevLayer->next();
 847 }
 848
 849 curLayer->setMaskImage(maskImage);
 850 prevLayer = curLayer;
 851 curLayer = curLayer->next();
 852 }
 853}
832854
833855void RenderStyle::setClip(Length top, Length right, Length bottom, Length left)
834856{

Source/WebCore/rendering/style/RenderStyle.h

@@class FilterOperations;
108108class Font;
109109class FontMetrics;
110110class IntRect;
 111class MaskImageOperation;
111112class Pair;
112113class ShadowData;
113114class StyleImage;

@@public:
798799 FillLayer* accessBackgroundLayers() { return &(m_background.access()->m_background); }
799800 const FillLayer* backgroundLayers() const { return &(m_background->background()); }
800801
801  StyleImage* maskImage() const { return rareNonInheritedData->m_mask.image(); }
802802 EFillRepeat maskRepeatX() const { return static_cast<EFillRepeat>(rareNonInheritedData->m_mask.repeatX()); }
803803 EFillRepeat maskRepeatY() const { return static_cast<EFillRepeat>(rareNonInheritedData->m_mask.repeatY()); }
804804 CompositeOperator maskComposite() const { return static_cast<CompositeOperator>(rareNonInheritedData->m_mask.composite()); }

@@public:
10251025 void applyTransform(TransformationMatrix&, const FloatRect& boundingBox, ApplyTransformOrigin = IncludeTransformOrigin) const;
10261026 void setPageScaleTransform(float);
10271027
1028  bool hasMask() const { return rareNonInheritedData->m_mask.hasImage() || rareNonInheritedData->m_maskBoxImage.hasImage(); }
 1028 bool hasMask() const { return rareNonInheritedData->m_mask.hasNonEmptyMaskImage() || rareNonInheritedData->m_mask.hasImage() || rareNonInheritedData->m_maskBoxImage.hasImage(); }
10291029
10301030 TextCombine textCombine() const { return static_cast<TextCombine>(rareNonInheritedData->m_textCombine); }
10311031 bool hasTextCombine() const { return textCombine() != TextCombineNone; }

@@public:
11261126 FilterOperations& mutableFilter() { return rareNonInheritedData.access()->m_filter.access()->m_operations; }
11271127 const FilterOperations& filter() const { return rareNonInheritedData->m_filter->m_operations; }
11281128 bool hasFilter() const { return !rareNonInheritedData->m_filter->m_operations.operations().isEmpty(); }
 1129
 1130 RefPtr<MaskImageOperation>& mutableMaskImage() { return rareNonInheritedData.access()->m_mask.m_maskImageOperation; }
 1131 const RefPtr<MaskImageOperation> maskImage() const { return rareNonInheritedData->m_mask.maskImage(); }
11291132
11301133#if ENABLE(FILTERS_LEVEL_2)
11311134 FilterOperations& mutableBackdropFilter() { return rareNonInheritedData.access()->m_backdropFilter.access()->m_operations; }

@@public:
13771380 }
13781381 }
13791382
1380  void setMaskImage(PassRefPtr<StyleImage> v) { rareNonInheritedData.access()->m_mask.setImage(v); }
1381 
13821383 void setMaskBoxImage(const NinePieceImage& b) { SET_VAR(rareNonInheritedData, m_maskBoxImage, b); }
13831384 void setMaskBoxImageSource(PassRefPtr<StyleImage> v) { rareNonInheritedData.access()->m_maskBoxImage.setImage(v); }
13841385 void setMaskXPosition(Length length) { SET_VAR(rareNonInheritedData, m_mask.m_xPosition, WTF::move(length)); }

@@public:
15691570 void setBackdropFilter(const FilterOperations& ops) { SET_VAR(rareNonInheritedData.access()->m_backdropFilter, m_operations, ops); }
15701571#endif
15711572
 1573 void setMaskImage(const Vector<RefPtr<MaskImageOperation>>&);
 1574 void setMaskImage(const RefPtr<MaskImageOperation> maskImage) { Vector<RefPtr<MaskImageOperation>> vectMask; vectMask.append(maskImage); setMaskImage(vectMask); }
 1575
15721576 void setTabSize(unsigned size) { SET_VAR(rareInheritedData, m_tabSize, size); }
15731577
15741578 // End CSS3 Setters