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 841601 - Add a second batch of tests for background-blending which tests each blend mode. r=roc

Browse Source 
The reference results are copied over from the svg tests.
This commit is contained in:
Horia Iosif Olaru 2013-11-08 10:09:08 -05:00
parent 2b693ecfaf
commit f2ff499ef7
34 changed files with 622 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
layout/reftests/css-blending/background-blending-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/css-blending/background-blending-color-burn.html Normal file
View File

@ -0,0 +1,16 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: color-burn;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-color-dodge.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: color-dodge;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-color.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: color;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-darken.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: darken;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-difference.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: difference;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-exclusion.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: exclusion;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-hard-light.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: hard-light;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-hue.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: hue;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-lighten.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: lighten;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-luminosity.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: luminosity;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-multiply.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: multiply;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-normal.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: normal;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-overlay.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: overlay;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-saturation.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: saturation;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-screen.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: screen;
}
</style>
<div class="reftest blend"></div>
</html>

22
layout/reftests/css-blending/background-blending-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

14
layout/reftests/css-blending/background-blending-soft-light.html Normal file
View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<link rel="stylesheet" href="blend-modes.css" type="text/css" />
<style>
.blend {
background-blend-mode: soft-light;
}
</style>
<div class="reftest blend"></div>
</html>

26
layout/reftests/css-blending/blend-modes.css Normal file
View File

@ -0,0 +1,26 @@
body {
margin: 0;
}
.reftest {
width: 160px;
height: 160px;
background-size:
160px 40px, 160px 40px, 160px 40px, 160px 40px,
40px 160px, 40px 160px, 40px 160px, 40px 160px;
background-position:
0px 0px, 0px 40px, 0px 80px, 0px 120px,
0px 0px, 40px 0px, 80px 0, 120px 0;
background-repeat: no-repeat;
background-image: url(as-image/red100x100.png),
url(as-image/green100x100.png),
url(as-image/blue100x100.png),
url(as-image/brown100x100.png),
url(as-image/red100x100.png),
url(as-image/green100x100.png),
url(as-image/blue100x100.png),
url(as-image/brown100x100.png);
}

18
layout/reftests/css-blending/reftest.list
View File

@ -16,3 +16,21 @@ pref(layout.css.background-blend-mode.enabled,true) == background-blending-image
pref(layout.css.background-blend-mode.enabled,true) == background-blending-isolation.html background-blending-isolation-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-list-repeat.html background-blending-list-repeat-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-multiple-images.html background-blending-multiple-images-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-color-burn.html background-blending-color-burn-ref.svg
pref(layout.css.background-blend-mode.enabled,true) == background-blending-color-dodge.html background-blending-color-dodge-ref.svg
# need to investigate why these tests are fuzzy - first suspect is a possible color space conversion on some platforms; same for mix-blend-mode tests
fuzzy-if(azureQuartz,2,8000) fuzzy-if(azureSkia||gtk2Widget,2,9600) fuzzy-if(d2d,1,8000) pref(layout.css.background-blend-mode.enabled,true) == background-blending-color.html background-blending-color-ref.svg
pref(layout.css.background-blend-mode.enabled,true) == background-blending-darken.html background-blending-darken-ref.svg
pref(layout.css.background-blend-mode.enabled,true) == background-blending-difference.html background-blending-difference-ref.svg
pref(layout.css.background-blend-mode.enabled,true) == background-blending-exclusion.html background-blending-exclusion-ref.svg
fuzzy-if(azureQuartz||d2d,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-hard-light.html background-blending-hard-light-ref.svg
fuzzy-if(azureQuartz,2,8000) fuzzy-if(d2d,1,9600) fuzzy-if(azureSkia||gtk2Widget,2,9600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-hue.html background-blending-hue-ref.svg
pref(layout.css.background-blend-mode.enabled,true) == background-blending-lighten.html background-blending-lighten-ref.svg
fuzzy-if(azureQuartz,2,8000) fuzzy-if(d2d,1,8000) fuzzy-if(azureSkia||gtk2Widget,2,9600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-luminosity.html background-blending-luminosity-ref.svg
pref(layout.css.background-blend-mode.enabled,true) == background-blending-multiply.html background-blending-multiply-ref.svg
pref(layout.css.background-blend-mode.enabled,true) == background-blending-normal.html background-blending-normal-ref.svg
fuzzy-if(azureSkia||gtk2Widget,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-overlay.html background-blending-overlay-ref.svg
fuzzy-if(d2d,1,1600) fuzzy-if(azureSkia||gtk2Widget,2,12800) fuzzy-if(OSX==10.6,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-saturation.html background-blending-saturation-ref.svg
fuzzy-if(d2d||azureSkia||gtk2Widget,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-screen.html background-blending-screen-ref.svg
fuzzy-if(azureQuartz,1,1600) fuzzy-if(d2d||azureSkia||gtk2Widget,10,4800) pref(layout.css.background-blend-mode.enabled,true) == background-blending-soft-light.html background-blending-soft-light-ref.svg