mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 970348 - Add background-blend-mode reftests corresponding to the csswg test plan. r=roc, r=heycam 

* 5.3.1: Blending between the background layers and the background color for an element with background-blend-mode. Most of section 5.3.1 is covered by other tests. Add the missing tests of the 5.3.1 section of the test plan.
- Test 9: SVG image and background color (SVG as data:uri)
- Test 10: Animated gif image and background color
- Test 12: background-blend-mode on element with 3D transform

* 5.3.2: Background layers do not blend with content outside the background (or behind the element).
- Implementation of tests 2 and 3. Test 1 is already covered by background-blending-isolation.html.

* 5.3.6: background-blend-mode for an element with background-position

* 5.3.7: background-blend-mode for an element with background-size

* 5.3.8: background-blend-mode for an element with background-repeat

* 5.3.9: background-blend-mode for an element with background-clip

* 5.3.10: background-blend-mode for an element with background-origin

* 5.3.11: background-blend-mode for an element with background-attachement

* Add extra tests for the background-blend-mode CSS property: Add some invalid values to the background-blend-mode property definition so that it can benefit from existing invalid property tests.
This commit is contained in:
Horia Iosif Olaru 2014-02-25 08:40:54 -05:00
Родитель 2f5201d33b
Коммит 291cd75eb6
32 изменённых файлов: 636 добавлений и 2 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
layout/reftests/css-blending/as-image/green_square.svg
Просмотреть файл

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<svg><rect width="100%" height="100%" fill="#00FF00"/></svg>
<rect width="100%" height="100%" fill="#00FF00"/>
</svg>

Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 147 B

После

Ширина:  |  Высота:  |  Размер: 136 B

Двоичные данные
layout/reftests/css-blending/as-image/red_green.gif Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 317 B

3
layout/reftests/css-blending/as-image/white_square.svg Normal file
Просмотреть файл

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="#FFFFFF"/>
</svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 135 B

19
layout/reftests/css-blending/background-blending-background-attachement-fixed-ref.html Normal file
Просмотреть файл

@ -0,0 +1,19 @@
<!-- Blend a background image and a background color specifying background-attachment: fixed -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: #777777;
background-attachment: fixed ;
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

23
layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll-ref.html Normal file
Просмотреть файл

@ -0,0 +1,23 @@
<!-- Blend two background images having background-attachment: fixed and scroll respectively -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: url('as-image/black100x100.png'), url('as-image/green100x100.png');
background-size: 100px 100px, 200px 100px;
background-repeat: no-repeat;
}
body {
margin: 0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

40
layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll.html Normal file
Просмотреть файл

@ -0,0 +1,40 @@
<!-- Blend two background images having background-attachment: fixed and scroll respectively -->
<!DOCTYPE HTML>
<html>
<head>
<style>
#parent {
width: 200px;
height: 200px;
overflow: hidden;
}
#child {
background: url('as-image/green100x100.png'), url('as-image/green100x100.png');
background-attachment: fixed, scroll;
background-size: 100px 100px, 200px 200px;
background-repeat: no-repeat no-repeat;
background-blend-mode: difference;
height: 400px;
}
body {
margin: 0px;
}
</style>
<script>
function onLoad() {
var parent = document.getElementById("parent");
parent.scrollTop = 100;
}
</script>
</head>
<body onload="onLoad()">
<div id="parent">
<div id="child">
</div>
</div>
</body>
</html>

20
layout/reftests/css-blending/background-blending-background-attachement-fixed.html Normal file
Просмотреть файл

@ -0,0 +1,20 @@
<!-- Blend a background image and a background color specifying background-attachment: fixed -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: url('as-image/white_square.svg'), #777777;
background-attachment: fixed ;
width: 200px;
height: 200px;
margin: 10px;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

19
layout/reftests/css-blending/background-blending-background-clip-content-box-ref.html Normal file
Просмотреть файл

@ -0,0 +1,19 @@
<!-- Blend a background image and a background color specifying background-clip: content-box -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: #777777;
background-clip: content-box;
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

20
layout/reftests/css-blending/background-blending-background-clip-content-box.html Normal file
Просмотреть файл

@ -0,0 +1,20 @@
<!-- Blend a background image and a background color specifying background-clip: content-box -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: url('as-image/white_square.svg'), #777777;
background-clip: content-box;
width: 200px;
height: 200px;
margin: 10px;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

21
layout/reftests/css-blending/background-blending-background-clip-padding-box-ref.html Normal file
Просмотреть файл

@ -0,0 +1,21 @@
<!-- Blend a background image and a background color specifying background-clip: padding-box -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
padding: 8.5px;
margin: 0 0 9px;
background: #777777;
background-clip: padding-box;
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

22
layout/reftests/css-blending/background-blending-background-clip-padding-box.html Normal file
Просмотреть файл

@ -0,0 +1,22 @@
<!-- Blend a background image and a background color specifying background-clip: padding-box -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
padding: 8.5px;
margin: 0 0 9px;
background: url('as-image/white_square.svg'), #777777;
background-clip: padding-box;
width: 200px;
height: 200px;
margin: 10px;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

20
layout/reftests/css-blending/background-blending-background-origin-border-box.html Normal file
Просмотреть файл

@ -0,0 +1,20 @@
<!-- Blend a background image and a background color specifying background-origin: border-box -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: url('as-image/white_square.svg'), #777777;
background-origin: border-box;
width: 200px;
height: 200px;
margin: 10px;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

21
layout/reftests/css-blending/background-blending-background-origin-content-box.html Normal file
Просмотреть файл

@ -0,0 +1,21 @@
<!-- Blend a background image and a background color specifying background-origin: content-box -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: url('as-image/white_square.svg'), #777777;
background-origin: content-box;
width: 180px;
height: 180px;
margin: 10px;
padding: 10px;
background-blend-mode: multiply
}
</style>
</head>
<body>
<div></div>
</body>
</html>

19
layout/reftests/css-blending/background-blending-background-origin-ref.html Normal file
Просмотреть файл

@ -0,0 +1,19 @@
<!-- Blend a background image and a background color specifying background-origin -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: #777777;
background-origin: border-box;
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

19
layout/reftests/css-blending/background-blending-background-position-percentage-ref.html Normal file
Просмотреть файл

@ -0,0 +1,19 @@
<!-- Blend a background image and a background color specifying background-position in percentage, such as 50% 50% -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background-color: #777777;
background-position: 10% 10%;
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

20
layout/reftests/css-blending/background-blending-background-position-percentage.html Normal file
Просмотреть файл

@ -0,0 +1,20 @@
<!-- Blend a background image and a background color specifying background-position in percentage, such as 50% 50% -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: url('as-image/white_square.svg'), #777777;
background-position: 10% 10%;
width: 200px;
height: 200px;
margin: 10px;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

19
layout/reftests/css-blending/background-blending-background-repeat-no-repeat-ref.html Normal file
Просмотреть файл

@ -0,0 +1,19 @@
<!-- Blend a background image and a background color specifying background-repeat: no-repeat -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background-color: #777777;
background-repeat: no-repeat;
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

21
layout/reftests/css-blending/background-blending-background-repeat-no-repeat.html Normal file
Просмотреть файл

@ -0,0 +1,21 @@
<!-- Blend a background image and a background color specifying background-repeat: no-repeat -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background-image: url('as-image/white_square.svg');
background-color: #777777;
background-repeat: no-repeat;
width: 200px;
height: 200px;
margin: 10px;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

20
layout/reftests/css-blending/background-blending-background-size-contain.html Normal file
Просмотреть файл

@ -0,0 +1,20 @@
<!-- Blend a background image and a background color specifying background-size: contain -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: url('as-image/white_square.svg'), #777777;
background-size: contain;
width: 200px;
height: 200px;
margin: 10px;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

20
layout/reftests/css-blending/background-blending-background-size-cover.html Normal file
Просмотреть файл

@ -0,0 +1,20 @@
<!-- Blend a background image and a background color specifying background-size: cover -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: url('as-image/white_square.svg'), #777777;
background-size: cover;
width: 200px;
height: 200px;
margin: 10px;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

20
layout/reftests/css-blending/background-blending-background-size-percentage.html Normal file
Просмотреть файл

@ -0,0 +1,20 @@
<!-- Blend a background image and a background color specifying background-size in percentage -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: url('as-image/white_square.svg'), #777777;
background-size: 50% 50%;
width: 200px;
height: 200px;
margin: 10px;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

20
layout/reftests/css-blending/background-blending-background-size-pixels.html Normal file
Просмотреть файл

@ -0,0 +1,20 @@
<!-- Blend a background image and a background color specifying background-size in pixels -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: url('as-image/white_square.svg'), #777777;
background-size: 100px 100px;
width: 200px;
height: 200px;
margin: 10px;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

18
layout/reftests/css-blending/background-blending-background-size-ref.html Normal file
Просмотреть файл

@ -0,0 +1,18 @@
<!-- Blend a background image and a background color specifying background-size -->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background: #777777;
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

14
layout/reftests/css-blending/background-blending-image-color-gif-ref.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!DOCTYPE HTML>
<html>
<style>
div {
width: 100px;
height: 100px;
background-color: rgb(0,255,0);
}
</style>
<body>
<div></div>
</body>
</html>

29
layout/reftests/css-blending/background-blending-image-color-gif.html Normal file
Просмотреть файл

@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html>
<style>
.reftest {
width: 100px;
height: 100px;
background-size: 100px 100px, 100px 100px;
background-repeat: no-repeat;
}
.blend {
background-color: rgb(255,255,0);
background-blend-mode: difference;
}
.gif {
background-image: url('as-image/red_green.gif');
}
</style>
<body>
<div class="reftest blend gif"></div>
</body>
</html>

26
layout/reftests/css-blending/background-blending-image-color-svg-as-data-uri.html Normal file
Просмотреть файл

@ -0,0 +1,26 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE HTML>
<html>
<style>
.reftest {
width: 200px;
height: 200px;
background-size: 100px 100px, 200px 200px;
background-repeat: no-repeat;
}
.blend {
background-color: rgb(0,255,0);
background-blend-mode: difference;
}
.svg {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20version%3D%271.1%27%20viewBox%3D%270%200%20100%20100%27%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27%2300FF00%27%2F%3E%3C%2Fsvg%3E");
}
</style>
<div class="reftest blend svg"></div>
</html>

28
layout/reftests/css-blending/background-blending-image-color-transform3d.html Normal file
Просмотреть файл

@ -0,0 +1,28 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE HTML>
<html>
<style>
.reftest {
width: 400px;
height: 200px;
background-size: 200px 100px, 400px 200px;
background-repeat: no-repeat;
transform-origin: 0 0;
transform: rotateY(60deg);
}
.blend {
background-color: rgb(0,255,0);
background-blend-mode: difference;
}
.png {
background-image: url(as-image/green100x100.png);
}
</style>
<div class="reftest blend png"></div>
</html>

29
layout/reftests/css-blending/background-blending-isolation-parent-child-color.html Normal file
Просмотреть файл

@ -0,0 +1,29 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE HTML>
<html>
<style>
.reftest {
width: 100px;
height: 100px;
}
.parent {
background-color: rgb(255, 255, 0);
background-blend-mode: screen;
}
.child {
background-color: rgb(0, 255, 0);
background-blend-mode: difference;
}
</style>
<body>
<div class="reftest parent">
<div class="reftest child"></div>
</div>
</body>
</html>

29
layout/reftests/css-blending/background-blending-isolation-parent-child-image.html Normal file
Просмотреть файл

@ -0,0 +1,29 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE HTML>
<html>
<style>
.reftest {
width: 100px;
height: 100px;
}
.parent {
background-color: rgb(255, 255, 0);
background-blend-mode: screen;
}
.child {
background-image: url(as-image/green100x100.png);
background-blend-mode: difference;
}
</style>
<body>
<div class="reftest parent">
<div class="reftest child"></div>
</div>
</body>
</html>

19
layout/reftests/css-blending/background-blending-isolation-parent-child-ref.html Normal file
Просмотреть файл

@ -0,0 +1,19 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE HTML>
<html>
<style>
.reftest {
width: 100px;
height: 100px;
}
.color {
background-color: rgb(0, 255, 0);
}
</style>
<div class="reftest color"></div>
</html>

36
layout/reftests/css-blending/reftest.list
Просмотреть файл

@ -36,3 +36,39 @@ fuzzy-if(d2d||azureSkia||gtk2Widget,1,1600) pref(layout.css.background-blend-mod
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
fuzzy-if(azureQuartz,2,40000) fuzzy-if(azureSkia||d2d||gtk2Widget,1,40000) pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-959674.html background-blending-image-color-959674-ref.html
# Test plan 5.3.1 Blending between the background layers and the background color for an element with background-blend-mode
# Test 9
pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-svg-as-data-uri.html background-blending-image-color-ref.html
# Test 10
pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-gif.html background-blending-image-color-gif-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-transform3d.html background-blending-image-color-ref.html
# Test plan 5.3.2 Background layers do not blend with content outside the background (or behind the element) - tests 2 and 3
pref(layout.css.background-blend-mode.enabled,true) == background-blending-isolation-parent-child-color.html background-blending-isolation-parent-child-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-isolation-parent-child-image.html background-blending-isolation-parent-child-ref.html
# Test plan 5.3.6 background-blend-mode for an element with background-position
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-position-percentage.html background-blending-background-position-percentage-ref.html
# Test plan 5.3.7 background-blend-mode for an element with background-size
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-size-contain.html background-blending-background-size-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-size-cover.html background-blending-background-size-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-size-percentage.html background-blending-background-size-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-size-pixels.html background-blending-background-size-ref.html
# Test plan 5.3.8 background-blend-mode for an element with background-repeat
# Tests 2 and 3 are not added because space and round are not currently supported
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-repeat-no-repeat.html background-blending-background-repeat-no-repeat-ref.html
# Test plan 5.3.9 background-blend-mode for an element with background-clip
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-clip-content-box.html background-blending-background-clip-content-box-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-clip-padding-box.html background-blending-background-clip-padding-box-ref.html
# Test plan 5.3.10 background-blend-mode for an element with background-origin
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-origin-border-box.html background-blending-background-origin-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-origin-content-box.html background-blending-background-origin-ref.html
# Test plan 5.3.11 background-blend-mode for an element with background-attachement
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-attachement-fixed.html background-blending-background-attachement-fixed-ref.html
pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-attachement-fixed-scroll.html background-blending-background-attachement-fixed-scroll-ref.html

2
layout/style/test/property_database.js
Просмотреть файл

@ -4900,7 +4900,7 @@ if (SpecialPowers.getBoolPref("layout.css.background-blend-mode.enabled")) {
initial_values: [ "normal" ],
other_values: [ "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn",
"hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity" ],
invalid_values: []
invalid_values: ["none", "10px", "multiply multiply"]
};
}