wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 902525 - Part 4: first set of testfiles for SVG blending r=roc

Browse Source
This commit is contained in:
Rik Cabanier 2013-09-16 13:21:00 +10:00
parent 37cda4a234
commit 987491e0af
45 changed files with 803 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
layout/reftests/svg/blend-color-burn-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-color-burn.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: color-burn;"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 754 B

22
layout/reftests/svg/blend-color-dodge-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(253,253,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-color-dodge.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: color-dodge"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 754 B

22
layout/reftests/svg/blend-color-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(255,105,105,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(93,0,0,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(255,52,52,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(0,131,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,48,0,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(0,192,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(55,55,255,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(137,137,255,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(95,95,255,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(86,86,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(164,164,37,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(31,31,0,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-color.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: color"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 748 B

22
layout/reftests/svg/blend-darken-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-darken.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: darken"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

22
layout/reftests/svg/blend-difference-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

28
layout/reftests/svg/blend-difference-stacking-ref.html Normal file
View File

@ -0,0 +1,28 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<style>
#b {
width: 200px;
height: 200px;
background-color: rgb(0,255,0);
}
#c {
z-index: 1;
position: absolute;
top:100px;
}
</style>
<div id="b">
<svg width="100" height="100" viewBox="0 0 100 100" >
<rect style="fill:#000000;" width="100" height="100"/>
</svg>
<div id="c">
<svg width="100" height="100" viewBox="0 0 100 100" >
<rect style="fill:#00FF00;" width="100" height="100"/>
</svg>
</div>
</div>
</html>

28
layout/reftests/svg/blend-difference-stacking.html Normal file
View File

@ -0,0 +1,28 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<style>
#b {
width: 200px;
height: 200px;
background-color: rgb(0,255,0);
}
#c {
z-index: 1;
position: absolute;
top:100px;
}
</style>
<div id="b">
<svg width="100" height="100" viewBox="0 0 100 100" >
<rect style="fill:#00FF00;mix-blend-mode:difference;" width="100" height="100"/>
</svg>
<div id="c">
<svg width="100" height="100" viewBox="0 0 100 100" >
<rect style="fill:#00FF00;mix-blend-mode:difference;" width="100" height="100"/>
</svg>
</div>
</div>
</html>

16
layout/reftests/svg/blend-difference.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: difference"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 753 B

22
layout/reftests/svg/blend-exclusion-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-exclusion.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: exclusion"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 752 B

22
layout/reftests/svg/blend-hard-light-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(254,0,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(0,254,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-hard-light.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: hard-light"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 753 B

22
layout/reftests/svg/blend-hue-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(255,105,105,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(93,0,0,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(202,75,75,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(0,131,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,48,0,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(38,165,38,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(55,55,255,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(137,137,255,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(99,99,226,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(87,87,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(169,169,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(31,31,0,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-hue.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: hue"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 746 B

7
layout/reftests/svg/blend-layer-blend-ref.svg Normal file
View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 301 B

10
layout/reftests/svg/blend-layer-blend.svg Normal file
View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
<g style="mix-blend-mode: multiply">
<rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 451 B

7
layout/reftests/svg/blend-layer-filter-ref.svg Normal file
View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 302 B

15
layout/reftests/svg/blend-layer-filter.svg Normal file
View File

@ -0,0 +1,15 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
<g filter="url(#f1)">
<rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 546 B

7
layout/reftests/svg/blend-layer-mask-ref.svg Normal file
View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 301 B

15
layout/reftests/svg/blend-layer-mask.svg Normal file
View File

@ -0,0 +1,15 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<mask id="msk">
<rect x="10" y="10" width="20" height="20" />
</mask>
</defs>
<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
<g mask="url(#msk)">
<rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 520 B

7
layout/reftests/svg/blend-layer-opacity-ref.svg Normal file
View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 299 B

10
layout/reftests/svg/blend-layer-opacity.svg Normal file
View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
<g opacity=".5">
<rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 432 B

22
layout/reftests/svg/blend-lighten-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-lighten.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: lighten"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 750 B

22
layout/reftests/svg/blend-luminosity-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(0,131,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(55,55,255,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(86,86,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(255,105,105,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(137,137,255,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(164,164,37,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(93,0,0,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,48,0,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(31,31,0,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(255,52,52,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(0,192,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(95,95,255,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-luminosity.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: luminosity"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 753 B

22
layout/reftests/svg/blend-multiply-alpha-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,127,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(127,63,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,127,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(64,127,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(63,63,0,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(191,0,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(0,191,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,127,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(95,95,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-multiply-alpha.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="opacity: .5; mix-blend-mode: multiply"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 764 B

22
layout/reftests/svg/blend-multiply-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(63,63,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-multiply.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: multiply"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 751 B

22
layout/reftests/svg/blend-normal-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-normal.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: normal"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 750 B

22
layout/reftests/svg/blend-overlay-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(254,0,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(0,254,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(126,126,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-overlay.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: overlay"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 751 B

22
layout/reftests/svg/blend-saturation-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(166,39,39,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(76,203,76,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(14,14,141,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-saturation.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: saturation"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 754 B

22
layout/reftests/svg/blend-screen-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(190,190,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
layout/reftests/svg/blend-screen.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: screen"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 750 B

22
layout/reftests/svg/blend-soft-light-ref.svg Normal file
View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="0" width="40" height="40" fill="rgba(190,63,0,1)"></rect>
<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="40" width="40" height="40" fill="rgba(64,190,0,1)"></rect>
<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="80" width="40" height="40" fill="rgba(63,63,0,1)"></rect>
<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
<rect x="120" y="120" width="40" height="40" fill="rgba(126,126,0,1)"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
layout/reftests/svg/blend-soft-light.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" >
<defs>
<g id="patch">
<rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
<rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
<rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
<rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
</g>
</defs>
<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: soft-light"></use>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 754 B

23
layout/reftests/svg/reftest.list
View File

@ -367,3 +367,26 @@ skip-if(B2G) == tspan-xy-anchor-end-01.svg tspan-xy-anchor-end-ref.svg # bug 773
== svg-effects-area-zoomed-out.xhtml svg-effects-area-zoomed-out-ref.xhtml
== href-attr-change-restyles.svg href-attr-change-restyles-ref.svg
== mask-img.html mask-img-ref.html
skip-if(d2d||B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-color-burn.svg blend-color-burn-ref.svg
skip-if(d2d||B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-color-dodge.svg blend-color-dodge-ref.svg
# pref(layout.css.mix-blend-mode.enabled,true) == blend-color.svg blend-color-ref.svg
skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-darken.svg blend-darken-ref.svg
skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-difference.svg blend-difference-ref.svg
skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-exclusion.svg blend-exclusion-ref.svg
# pref(layout.css.mix-blend-mode.enabled,true) == blend-hard-light.svg blend-hard-light-ref.svg
# pref(layout.css.mix-blend-mode.enabled,true) == blend-hue.svg blend-hue-ref.svg
skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-layer-blend.svg blend-layer-blend-ref.svg
skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-layer-filter.svg blend-layer-filter-ref.svg
skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-layer-mask.svg blend-layer-mask-ref.svg
skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-layer-opacity.svg blend-layer-opacity-ref.svg
skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-lighten.svg blend-lighten-ref.svg
# pref(layout.css.mix-blend-mode.enabled,true) == blend-luminosity.svg blend-luminosity-ref.svg
#skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-multiply-alpha.svg blend-multiply-alpha-ref.svg
skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-multiply.svg blend-multiply-ref.svg
pref(layout.css.mix-blend-mode.enabled,true) == blend-normal.svg blend-normal-ref.svg
#skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-overlay.svg blend-overlay-ref.svg
#skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-saturation.svg blend-saturation-ref.svg
#skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-screen.svg blend-screen-ref.svg
# skip-if(B2G||(Android&&AndroidVersion<15)) pref(layout.css.mix-blend-mode.enabled,true) == blend-soft-light.svg blend-soft-light-ref.svg
skip-if(B2G||Android) pref(layout.css.mix-blend-mode.enabled,true) == blend-difference-stacking.html blend-difference-stacking-ref.html