Diff
Modified: trunk/LayoutTests/ChangeLog (236023 => 236024)
--- trunk/LayoutTests/ChangeLog 2018-09-14 23:54:09 UTC (rev 236023)
+++ trunk/LayoutTests/ChangeLog 2018-09-14 23:55:37 UTC (rev 236024)
@@ -1,3 +1,35 @@
+2018-09-14 Justin Michaud <justin_mich...@apple.com>
+
+ Add support for spreadMethod=reflect and repeat on SVG gradients (for CoreGraphics platforms)
+ https://bugs.webkit.org/show_bug.cgi?id=5968
+
+ Add new svg tests for linear gradients with spreadMethod, and alpha values specified in
+ both stop-opacity and color.
+
+ Reviewed by Simon Fraser.
+
+ * platform/mac/svg/W3C-SVG-1.1/pservers-grad-10-b-expected.png:
+ * svg/gradients/spreadMethod-expected.svg: Added.
+ * svg/gradients/spreadMethod.svg: Added.
+ * svg/gradients/spreadMethodAlpha-expected.svg: Added.
+ * svg/gradients/spreadMethodAlpha.svg: Added.
+ * svg/gradients/spreadMethodClose0-expected-mismatch.svg: Added.
+ * svg/gradients/spreadMethodClose0.svg: Added.
+ * svg/gradients/spreadMethodClose1-expected-mismatch.svg: Added.
+ * svg/gradients/spreadMethodClose1.svg: Added.
+ * svg/gradients/spreadMethodClose2-expected.svg: Added.
+ * svg/gradients/spreadMethodClose2.svg: Added.
+ * svg/gradients/spreadMethodDiagonal-expected.svg: Added.
+ * svg/gradients/spreadMethodDiagonal.svg: Added.
+ * svg/gradients/spreadMethodDiagonal2-expected.svg: Added.
+ * svg/gradients/spreadMethodDiagonal2.svg: Added.
+ * svg/gradients/spreadMethodDuplicateStop-expected.svg: Added.
+ * svg/gradients/spreadMethodDuplicateStop.svg: Added.
+ * svg/gradients/spreadMethodReversed-expected.svg: Added.
+ * svg/gradients/spreadMethodReversed.svg: Added.
+ * svg/gradients/stopAlpha-expected.svg: Added.
+ * svg/gradients/stopAlpha.svg: Added.
+
2018-09-14 Ross Kirsling <ross.kirsl...@sony.com>
[WinCairo] Unreviewed test gardening.
Modified: trunk/LayoutTests/platform/mac/svg/W3C-SVG-1.1/pservers-grad-10-b-expected.png
(Binary files differ)
Added: trunk/LayoutTests/svg/gradients/spreadMethod-expected.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethod-expected.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethod-expected.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="10" y="35" width="115" height="55" fill="green"/>
+ <rect x="125" y="35" width="345" height="55" fill="blue"/>
+
+ <rect x="10" y="120" width="115" height="55" fill="green"/>
+ <rect x="125" y="120" width="115" height="55" fill="blue"/>
+ <rect x="240" y="120" width="115" height="55" fill="blue"/>
+ <rect x="355" y="120" width="115" height="55" fill="green"/>
+
+ <rect x="10" y="205" width="115" height="55" fill="green"/>
+ <rect x="125" y="205" width="115" height="55" fill="blue"/>
+ <rect x="240" y="205" width="115" height="55" fill="green"/>
+ <rect x="355" y="205" width="115" height="55" fill="blue"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethod.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethod.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethod.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <linearGradient id="base-grad" x1="0" y1="0" x2="50%" y2="0">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodAlpha-expected.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodAlpha-expected.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodAlpha-expected.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="10" y="35" width="115" height="55" fill="rgba(0,0,255,0.5)"/>
+ <rect x="125" y="35" width="345" height="55" fill="rgba(0,255,0,0.5)"/>
+
+ <rect x="10" y="120" width="115" height="55" fill="rgba(0,0,255,0.5)"/>
+ <rect x="125" y="120" width="230" height="55" fill="rgba(0,255,0,0.5)"/>
+ <rect x="355" y="120" width="115" height="55" fill="rgba(0,0,255,0.5)"/>
+
+ <rect x="10" y="205" width="115" height="55" fill="rgba(0,0,255,0.5)"/>
+ <rect x="125" y="205" width="115" height="55" fill="rgba(0,255,0,0.5)"/>
+ <rect x="240" y="205" width="115" height="55" fill="rgba(0,0,255,0.5)"/>
+ <rect x="355" y="205" width="115" height="55" fill="rgba(0,255,0,0.5)"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodAlpha.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodAlpha.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodAlpha.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <linearGradient id="base-grad" x1="0" y1="0" x2="50%" y2="0">
+ <stop stop-color="rgba(0,0,255,0.5)" offset="0"/>
+ <stop stop-color="rgba(0,0,255,0.5)" offset="0.5"/>
+ <stop stop-color="rgba(0,255,0,0.5)" offset="0.5"/>
+ <stop stop-color="rgba(0,255,0,0.5)" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodClose0-expected-mismatch.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodClose0-expected-mismatch.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodClose0-expected-mismatch.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="10" y="35" width="460" height="55" fill="green"/>
+ <rect x="10" y="120" width="460" height="55" fill="green"/>
+ <rect x="10" y="205" width="460" height="55" fill="green"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodClose0.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodClose0.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodClose0.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <linearGradient id="base-grad" x1="0.49" y1="0" x2="0.5" y2="0">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <rect x="10" y="35" width="100" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="100" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="100" height="55" fill="url(#pad-repeat)"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodClose1-expected-mismatch.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodClose1-expected-mismatch.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodClose1-expected-mismatch.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="10" y="35" width="460" height="55" fill="green"/>
+ <rect x="10" y="120" width="460" height="55" fill="green"/>
+ <rect x="10" y="205" width="460" height="55" fill="green"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodClose1.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodClose1.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodClose1.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <linearGradient id="base-grad" x1="0.4999999" y1="0" x2="0.5" y2="0">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <rect x="10" y="35" width="100" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="100" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="100" height="55" fill="url(#pad-repeat)"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodClose2-expected.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodClose2-expected.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodClose2-expected.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="10" y="35" width="460" height="55" fill="green"/>
+ <rect x="10" y="120" width="460" height="55" fill="green"/>
+ <rect x="10" y="205" width="460" height="55" fill="green"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodClose2.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodClose2.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodClose2.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <linearGradient id="base-grad" x1="0.5" y1="0" x2="0.5" y2="0">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodDiagonal-expected.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodDiagonal-expected.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodDiagonal-expected.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="10" y="35" width="460" height="13.75" fill="green"/>
+ <rect x="10" y="48.75" width="460" height="41.25" fill="blue"/>
+
+ <rect x="10" y="120" width="460" height="13.75" fill="green"/>
+ <rect x="10" y="133.75" width="460" height="27.5" fill="blue"/>
+ <rect x="10" y="161.25" width="460" height="13.75" fill="green"/>
+
+ <rect x="10" y="205" width="460" height="13.75" fill="green"/>
+ <rect x="10" y="218.75" width="460" height="13.75" fill="blue"/>
+ <rect x="10" y="232.5" width="460" height="13.75" fill="green"/>
+ <rect x="10" y="246.25" width="460" height="13.75" fill="blue"/>
+
+ <rect x="10" y="48" width="460" height="2" fill="grey"/>
+
+ <rect x="10" y="133" width="460" height="2" fill="grey"/>
+ <rect x="10" y="161" width="460" height="2" fill="grey"/>
+
+ <rect x="10" y="218" width="460" height="2" fill="grey"/>
+ <rect x="10" y="232" width="460" height="2" fill="grey"/>
+ <rect x="10" y="246" width="460" height="2" fill="grey"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodDiagonal.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodDiagonal.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodDiagonal.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <linearGradient id="base-grad" x1="0" y1="0" x2="50%" y2="0">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" gradientTransform="rotate(90)" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" gradientTransform="rotate(90)" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" gradientTransform="rotate(90)" />
+
+ <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
+
+ <rect x="10" y="48" width="460" height="2" fill="grey"/>
+
+ <rect x="10" y="133" width="460" height="2" fill="grey"/>
+ <rect x="10" y="161" width="460" height="2" fill="grey"/>
+
+ <rect x="10" y="218" width="460" height="2" fill="grey"/>
+ <rect x="10" y="232" width="460" height="2" fill="grey"/>
+ <rect x="10" y="246" width="460" height="2" fill="grey"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodDiagonal2-expected.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodDiagonal2-expected.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodDiagonal2-expected.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="10" y="35" width="460" height="13.75" fill="green"/>
+ <rect x="10" y="48.75" width="460" height="41.25" fill="blue"/>
+
+ <rect x="10" y="120" width="460" height="13.75" fill="green"/>
+ <rect x="10" y="133.75" width="460" height="27.5" fill="blue"/>
+ <rect x="10" y="161.25" width="460" height="13.75" fill="green"/>
+
+ <rect x="10" y="205" width="460" height="13.75" fill="green"/>
+ <rect x="10" y="218.75" width="460" height="13.75" fill="blue"/>
+ <rect x="10" y="232.5" width="460" height="13.75" fill="green"/>
+ <rect x="10" y="246.25" width="460" height="13.75" fill="blue"/>
+
+ <rect x="10" y="48" width="460" height="2" fill="grey"/>
+
+ <rect x="10" y="133" width="460" height="2" fill="grey"/>
+ <rect x="10" y="161" width="460" height="2" fill="grey"/>
+
+ <rect x="10" y="218" width="460" height="2" fill="grey"/>
+ <rect x="10" y="232" width="460" height="2" fill="grey"/>
+ <rect x="10" y="246" width="460" height="2" fill="grey"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodDiagonal2.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodDiagonal2.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodDiagonal2.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <linearGradient id="base-grad" x1="0" y1="0" x2="0" y2="50%">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
+
+ <rect x="10" y="48" width="460" height="2" fill="grey"/>
+
+ <rect x="10" y="133" width="460" height="2" fill="grey"/>
+ <rect x="10" y="161" width="460" height="2" fill="grey"/>
+
+ <rect x="10" y="218" width="460" height="2" fill="grey"/>
+ <rect x="10" y="232" width="460" height="2" fill="grey"/>
+ <rect x="10" y="246" width="460" height="2" fill="grey"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodDiagonal3-expected.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodDiagonal3-expected.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodDiagonal3-expected.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,56 @@
+<html><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000px" height="2000px">
+ <linearGradient id="base-grad" x1="-100%" y1="-100%" x2="-50%" y2="-50%">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <mask id="mymask">
+ <g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
+ <rect x="100" y="400" width="1100" height="105" fill="white" />
+ </g>
+ </mask>
+ <!-- Invert the mask for the other rect, so that we don't get anti-aliasing differences -->
+ <mask id="mymask-inv">
+ <rect x="0" y="0" width="2000" height="2000" fill="white" />
+ <g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
+ <rect x="100" y="400" width="1100" height="105" fill="black" />
+ </g>
+ </mask>
+
+ <mask id="mymask2">
+ <g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
+ <rect x="100" y="510" width="1100" height="55" fill="white" />
+ <rect x="100" y="620" width="1100" height="55" fill="white" />
+ </g>
+ </mask>
+ <mask id="mymask2-inv">
+ <rect x="0" y="0" width="2000" height="2000" fill="white" />
+ <g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
+ <rect x="100" y="510" width="1100" height="55" fill="black" />
+ <rect x="100" y="620" width="1100" height="55" fill="black" />
+ </g>
+ </mask>
+
+ <g transform="translate(200 0) rotate(7) scale(2)">
+ <rect x="10" y="35" width="460" height="55" fill="blue"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="green" mask="url(#mymask-inv)"/>
+ <rect x="10" y="120" width="460" height="55" fill="blue" mask="url(#mymask)" />
+
+ <rect x="10" y="205" width="460" height="55" fill="blue" mask="url(#mymask2-inv)"/>
+ <rect x="10" y="205" width="460" height="55" fill="green" mask="url(#mymask2)"/>
+ </g>
+
+ <rect x="180" y="65" width="50" height="55" fill="grey" />
+ <rect x="100" y="295" width="1100" height="10" fill="grey" />
+ <rect x="100" y="400" width="1100" height="10" fill="grey" />
+ <rect x="100" y="460" width="1100" height="10" fill="grey" />
+ <rect x="100" y="517" width="1100" height="10" fill="grey" />
+ <rect x="100" y="570" width="1100" height="10" fill="grey" />
+</svg></html>
Added: trunk/LayoutTests/svg/gradients/spreadMethodDiagonal3.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodDiagonal3.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodDiagonal3.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,27 @@
+<html><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000px" height="2000px">
+ <linearGradient id="base-grad" x1="-100%" y1="-100%" x2="-50%" y2="-50%">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <g transform="translate(200 0) rotate(7) scale(2)">
+ <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
+ </g>
+
+ <rect x="180" y="65" width="50" height="55" fill="grey" />
+ <rect x="100" y="295" width="1100" height="10" fill="grey" />
+ <rect x="100" y="400" width="1100" height="10" fill="grey" />
+ <rect x="100" y="460" width="1100" height="10" fill="grey" />
+ <rect x="100" y="517" width="1100" height="10" fill="grey" />
+ <rect x="100" y="570" width="1100" height="10" fill="grey" />
+</svg></html>
Added: trunk/LayoutTests/svg/gradients/spreadMethodDiagonal4-expected.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodDiagonal4-expected.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodDiagonal4-expected.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,70 @@
+<html><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000px" height="2000px">
+ <linearGradient id="base-grad" x1="-100%" y1="-100%" x2="-50%" y2="-50%">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <mask id="mymask0">
+ <g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
+ <rect x="100" y="120" width="1100" height="105" fill="white" />
+ </g>
+ </mask>
+ <mask id="mymask0-inv">
+ <rect x="0" y="0" width="2000" height="2000" fill="white" />
+ <g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
+ <rect x="100" y="120" width="1100" height="105" fill="black" />
+ </g>
+ </mask>
+
+ <mask id="mymask">
+ <g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
+ <rect x="100" y="400" width="1100" height="105" fill="white" />
+ </g>
+ </mask>
+ <mask id="mymask-inv">
+ <rect x="0" y="0" width="2000" height="2000" fill="white" />
+ <g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
+ <rect x="100" y="400" width="1100" height="105" fill="black" />
+ </g>
+ </mask>
+
+ <mask id="mymask2">
+ <g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
+ <rect x="100" y="510" width="1100" height="55" fill="white" />
+ <rect x="100" y="620" width="1100" height="55" fill="white" />
+ </g>
+ </mask>
+ <mask id="mymask2-inv">
+ <rect x="0" y="0" width="2000" height="2000" fill="white" />
+ <g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
+ <rect x="100" y="510" width="1100" height="55" fill="black" />
+ <rect x="100" y="620" width="1100" height="55" fill="black" />
+ </g>
+ </mask>
+
+ <g transform="translate(200 0) rotate(7) scale(2)">
+ <rect x="10" y="35" width="460" height="55" fill="blue" mask="url(#mymask0-inv)"/>
+ <rect x="10" y="35" width="460" height="55" fill="green" mask="url(#mymask0)" />
+
+ <rect x="10" y="120" width="460" height="55" fill="green" mask="url(#mymask-inv)"/>
+ <rect x="10" y="120" width="460" height="55" fill="blue" mask="url(#mymask)" />
+
+ <rect x="10" y="205" width="460" height="55" fill="blue" mask="url(#mymask2-inv)"/>
+ <rect x="10" y="205" width="460" height="55" fill="green" mask="url(#mymask2)"/>
+ </g>
+
+ <rect x="180" y="65" width="50" height="55" fill="grey" />
+
+ <rect x="100" y="120" width="1100" height="10" fill="grey" />
+ <rect x="100" y="295" width="1100" height="10" fill="grey" />
+ <rect x="100" y="400" width="1100" height="10" fill="grey" />
+ <rect x="100" y="460" width="1100" height="10" fill="grey" />
+ <rect x="100" y="517" width="1100" height="10" fill="grey" />
+ <rect x="100" y="570" width="1100" height="10" fill="grey" />
+</svg></html>
Added: trunk/LayoutTests/svg/gradients/spreadMethodDiagonal4.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodDiagonal4.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodDiagonal4.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000px" height="2000px">
+ <linearGradient id="base-grad" x1="0" y1="0" x2="50%" y2="50%">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <g transform="translate(200 0) rotate(7) scale(2)">
+ <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
+ </g>
+
+ <rect x="180" y="65" width="50" height="55" fill="grey" />
+ <rect x="100" y="120" width="1100" height="10" fill="grey" />
+ <rect x="100" y="295" width="1100" height="10" fill="grey" />
+ <rect x="100" y="400" width="1100" height="10" fill="grey" />
+ <rect x="100" y="460" width="1100" height="10" fill="grey" />
+ <rect x="100" y="517" width="1100" height="10" fill="grey" />
+ <rect x="100" y="570" width="1100" height="10" fill="grey" />
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodDuplicateStop-expected.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodDuplicateStop-expected.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodDuplicateStop-expected.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="10" y="35" width="115" height="55" fill="green"/>
+ <rect x="125" y="35" width="345" height="55" fill="blue"/>
+
+ <rect x="10" y="120" width="115" height="55" fill="green"/>
+ <rect x="125" y="120" width="115" height="55" fill="blue"/>
+ <rect x="240" y="120" width="115" height="55" fill="blue"/>
+ <rect x="355" y="120" width="115" height="55" fill="green"/>
+
+ <rect x="10" y="205" width="115" height="55" fill="green"/>
+ <rect x="125" y="205" width="115" height="55" fill="blue"/>
+ <rect x="240" y="205" width="115" height="55" fill="green"/>
+ <rect x="355" y="205" width="115" height="55" fill="blue"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodDuplicateStop.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodDuplicateStop.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodDuplicateStop.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <linearGradient id="base-grad" x1="0" y1="0" x2="0.5" y2="0">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="red" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodReversed-expected.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodReversed-expected.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodReversed-expected.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="10" y="35" width="115" height="55" fill="blue"/>
+ <rect x="125" y="35" width="345" height="55" fill="green"/>
+
+ <rect x="10" y="120" width="115" height="55" fill="blue"/>
+ <rect x="125" y="120" width="115" height="55" fill="green"/>
+ <rect x="240" y="120" width="115" height="55" fill="green"/>
+ <rect x="355" y="120" width="115" height="55" fill="blue"/>
+
+ <rect x="10" y="205" width="115" height="55" fill="blue"/>
+ <rect x="125" y="205" width="115" height="55" fill="green"/>
+ <rect x="240" y="205" width="115" height="55" fill="blue"/>
+ <rect x="355" y="205" width="115" height="55" fill="green"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/spreadMethodReversed.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/spreadMethodReversed.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/spreadMethodReversed.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <linearGradient id="base-grad" x1="50%" y1="0" x2="0" y2="0">
+ <stop stop-color="green" offset="0"/>
+ <stop stop-color="green" offset="0.5"/>
+ <stop stop-color="blue" offset="0.5"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/stopAlpha-expected.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/stopAlpha-expected.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/stopAlpha-expected.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="10" y="35" width="115" height="55" fill="rgba(0,255,0,0.25)"/>
+ <rect x="125" y="35" width="345" height="55" fill="rgba(0,0,255,0.25)"/>
+
+ <rect x="10" y="120" width="115" height="55" fill="rgba(0,255,0,0.25)"/>
+ <rect x="125" y="120" width="115" height="55" fill="rgba(0,0,255,0.25)"/>
+ <rect x="240" y="120" width="115" height="55" fill="rgba(0,0,255,0.25)"/>
+ <rect x="355" y="120" width="115" height="55" fill="rgba(0,255,0,0.25)"/>
+
+ <rect x="10" y="205" width="115" height="55" fill="rgba(0,255,0,0.25)"/>
+ <rect x="125" y="205" width="115" height="55" fill="rgba(0,0,255,0.25)"/>
+ <rect x="240" y="205" width="115" height="55" fill="rgba(0,255,0,0.25)"/>
+ <rect x="355" y="205" width="115" height="55" fill="rgba(0,0,255,0.25)"/>
+</svg>
Added: trunk/LayoutTests/svg/gradients/stopAlpha.svg (0 => 236024)
--- trunk/LayoutTests/svg/gradients/stopAlpha.svg (rev 0)
+++ trunk/LayoutTests/svg/gradients/stopAlpha.svg 2018-09-14 23:55:37 UTC (rev 236024)
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <linearGradient id="base-grad" x1="0" y1="0" x2="50%" y2="0">
+ <stop stop-color="rgba(0,255,0,0.5)" offset="0" stop-opacity="0.5" />
+ <stop stop-color="rgba(0,255,0,0.5)" offset="0.5" stop-opacity="0.5" />
+ <stop stop-color="rgba(0,0,255,0.5)" offset="0.5" stop-opacity="0.5" />
+ <stop stop-color="rgba(0,0,255,0.5)" offset="1" stop-opacity="0.5" />
+ </linearGradient>
+
+ <linearGradient id="pad-grad" xlink:href="" spreadMethod="pad" />
+ <linearGradient id="pad-reflect" xlink:href="" spreadMethod="reflect" />
+ <linearGradient id="pad-repeat" xlink:href="" spreadMethod="repeat" />
+
+ <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
+
+ <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
+
+ <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
+</svg>
Modified: trunk/Source/WebCore/ChangeLog (236023 => 236024)
--- trunk/Source/WebCore/ChangeLog 2018-09-14 23:54:09 UTC (rev 236023)
+++ trunk/Source/WebCore/ChangeLog 2018-09-14 23:55:37 UTC (rev 236024)
@@ -1,3 +1,39 @@
+2018-09-14 Justin Michaud <justin_mich...@apple.com>
+
+ Add support for spreadMethod=reflect and repeat on SVG gradients (for CoreGraphics platforms)
+ https://bugs.webkit.org/show_bug.cgi?id=5968
+
+ Add support for spreadMethod=repeat and reflect. Also, the opacity of a gradient is now
+ the result of multiplying stop-opacity with the opacity of the color.
+
+ Reviewed by Simon Fraser.
+
+ Tests: svg/gradients/spreadMethod-expected.svg
+ svg/gradients/spreadMethod.svg
+ svg/gradients/spreadMethodAlpha-expected.svg
+ svg/gradients/spreadMethodAlpha.svg
+ svg/gradients/spreadMethodClose0-expected-mismatch.svg
+ svg/gradients/spreadMethodClose0.svg
+ svg/gradients/spreadMethodClose1-expected-mismatch.svg
+ svg/gradients/spreadMethodClose1.svg
+ svg/gradients/spreadMethodClose2-expected.svg
+ svg/gradients/spreadMethodClose2.svg
+ svg/gradients/spreadMethodDiagonal-expected.svg
+ svg/gradients/spreadMethodDiagonal.svg
+ svg/gradients/spreadMethodDiagonal2-expected.svg
+ svg/gradients/spreadMethodDiagonal2.svg
+ svg/gradients/spreadMethodDuplicateStop-expected.svg
+ svg/gradients/spreadMethodDuplicateStop.svg
+ svg/gradients/spreadMethodReversed-expected.svg
+ svg/gradients/spreadMethodReversed.svg
+ svg/gradients/stopAlpha-expected.svg
+ svg/gradients/stopAlpha.svg
+
+ * platform/graphics/cg/GradientCG.cpp:
+ (WebCore::Gradient::paint):
+ * svg/SVGStopElement.cpp:
+ (WebCore::SVGStopElement::stopColorIncludingOpacity const):
+
2018-09-14 Ryan Haddad <ryanhad...@apple.com>
Unreviewed, attempt to fix the iOSMac build after r236015.
Modified: trunk/Source/WebCore/platform/graphics/cg/GradientCG.cpp (236023 => 236024)
--- trunk/Source/WebCore/platform/graphics/cg/GradientCG.cpp 2018-09-14 23:54:09 UTC (rev 236023)
+++ trunk/Source/WebCore/platform/graphics/cg/GradientCG.cpp 2018-09-14 23:55:37 UTC (rev 236024)
@@ -106,10 +106,63 @@
void Gradient::paint(CGContextRef platformContext)
{
CGGradientDrawingOptions extendOptions = kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation;
+ CGGradientRef gradient = platformGradient();
WTF::switchOn(m_data,
[&] (const LinearData& data) {
- CGContextDrawLinearGradient(platformContext, platformGradient(), data.point0, data.point1, extendOptions);
+ switch (m_spreadMethod) {
+ case SpreadMethodRepeat:
+ case SpreadMethodReflect: {
+ CGContextStateSaver saveState(platformContext);
+
+ FloatPoint gradientVectorNorm(data.point1 - data.point0);
+ gradientVectorNorm.normalize();
+ CGFloat angle = acos(gradientVectorNorm.dot({ 1, 0 }));
+ CGContextRotateCTM(platformContext, angle);
+
+ CGAffineTransform transform = CGAffineTransformMakeRotation(-angle);
+ FloatPoint point0 = CGPointApplyAffineTransform(data.point0, transform);
+ FloatPoint point1 = CGPointApplyAffineTransform(data.point1, transform);
+
+ CGRect boundingBox = CGContextGetClipBoundingBox(platformContext);
+ CGFloat width = point1.x() - point0.x();
+ CGFloat pixelSize = CGFAbs(CGContextConvertSizeToUserSpace(platformContext, CGSizeMake(1, 1)).width);
+
+ if (width > 0 && !CGRectIsInfinite(boundingBox) && !CGRectIsEmpty(boundingBox)) {
+ extendOptions = 0;
+ if (width < pixelSize)
+ width = pixelSize;
+
+ CGFloat gradientStart = point0.x();
+ CGFloat gradientEnd = point1.x();
+ bool flip = m_spreadMethod == SpreadMethodReflect;
+
+ // Find first gradient position to the left of the bounding box
+ int n = CGFloor((boundingBox.origin.x - gradientStart) / width);
+ gradientStart += n * width;
+ if (!(n % 2))
+ flip = false;
+
+ gradientEnd -= CGFloor((gradientEnd - CGRectGetMaxX(boundingBox)) / width) * width;
+
+ for (CGFloat start = gradientStart; start <= gradientEnd; start += width) {
+ CGPoint left = CGPointMake(flip ? start + width : start, boundingBox.origin.y);
+ CGPoint right = CGPointMake(flip ? start : start + width, boundingBox.origin.y);
+
+ CGContextDrawLinearGradient(platformContext, gradient, left, right, extendOptions);
+
+ if (m_spreadMethod == SpreadMethodReflect)
+ flip = !flip;
+ }
+
+ break;
+ }
+
+ FALLTHROUGH;
+ }
+ case SpreadMethodPad:
+ CGContextDrawLinearGradient(platformContext, gradient, data.point0, data.point1, extendOptions);
+ }
},
[&] (const RadialData& data) {
bool needScaling = data.aspectRatio != 1;
@@ -123,7 +176,7 @@
CGContextTranslateCTM(platformContext, -data.point0.x(), -data.point0.y());
}
- CGContextDrawRadialGradient(platformContext, platformGradient(), data.point0, data.startRadius, data.point1, data.endRadius, extendOptions);
+ CGContextDrawRadialGradient(platformContext, gradient, data.point0, data.startRadius, data.point1, data.endRadius, extendOptions);
if (needScaling)
CGContextRestoreGState(platformContext);
Modified: trunk/Source/WebCore/svg/SVGStopElement.cpp (236023 => 236024)
--- trunk/Source/WebCore/svg/SVGStopElement.cpp 2018-09-14 23:54:09 UTC (rev 236023)
+++ trunk/Source/WebCore/svg/SVGStopElement.cpp 2018-09-14 23:55:37 UTC (rev 236024)
@@ -99,7 +99,8 @@
return Color(Color::transparent, true); // Transparent black.
const SVGRenderStyle& svgStyle = style->svgStyle();
- return colorWithOverrideAlpha(svgStyle.stopColor().rgb(), svgStyle.stopOpacity());
+ float colorAlpha = svgStyle.stopColor().alpha() / 255.0;
+ return colorWithOverrideAlpha(svgStyle.stopColor().rgb(), colorAlpha * svgStyle.stopOpacity());
}
}
