mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-29 07:42:04 +00:00
Bug 841601 - Add background-blend-mode tests. r=roc
This commit is contained in:
Horia Iosif Olaru
parent
b360983fd3
commit
439ac01d43
BIN
layout/reftests/css-blending/as-image/blue100x100.png
Normal file
BIN
layout/reftests/css-blending/as-image/blue100x100.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
layout/reftests/css-blending/as-image/brown100x100.png
Normal file
BIN
layout/reftests/css-blending/as-image/brown100x100.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
layout/reftests/css-blending/as-image/green100x100.jpg
Normal file
BIN
layout/reftests/css-blending/as-image/green100x100.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 47 KiB |
BIN
layout/reftests/css-blending/as-image/green100x100_alpha.png
Normal file
BIN
layout/reftests/css-blending/as-image/green100x100_alpha.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
3
layout/reftests/css-blending/as-image/green_square.svg
Normal file
3
layout/reftests/css-blending/as-image/green_square.svg
Normal file
@ -0,0 +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>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 147 B |
BIN
layout/reftests/css-blending/as-image/red100x100.png
Normal file
BIN
layout/reftests/css-blending/as-image/red100x100.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
@ -0,0 +1,62 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
background-color: rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
opacity: 0.5;
|
||||
background-color: rgb(0, 127, 0);
|
||||
}
|
||||
|
||||
.topleft {
|
||||
float:left;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
/*First blend black rect with green in place*/
|
||||
/* Cs = (1 - αb) x Cs + αb x B(Cb, Cs)*/
|
||||
/* B(Cb, Cs) = | Cb - Cs | = (0, 0, 0) */
|
||||
/* 0.5 * (0, 255, 0) + 0.5 * (0, 0, 0) = (0, 127.5, 0)*/
|
||||
|
||||
/* Now, composite the resulting color with src-over; the alpha is the original alpha for the top layer
|
||||
while the color is the blending result*/
|
||||
/* co = αs x Fa x Cs + αb x Fb x Cb - this is premultiplied */
|
||||
/* αo = αs + αb x (1 – αs) */
|
||||
/* Source over: Fa = 1; Fb = 1 – αs */
|
||||
/*co = 0.5 * 1 * (0, 127.5, 0) + 0.5 * 0.5 * (0, 255, 0) = (0, 63.5, 0) + 0.25 * (0, 255, 0) = (0, 127.5, 0)*/
|
||||
/*ao = 0.5 + 0.5 * 0.5 = 0.75*/
|
||||
/* Co = co/ao = (0, 127.5, 0) / 0.75*/
|
||||
|
||||
/* Now alpha composite on white background */
|
||||
/*co = 0.75 * 1 * (0, 127.5, 0) / 0.75 + 1 * 0.25 * (255, 255, 255) = (0, 127.5, 0) + (63.75, 63.75, 63.75) = (63.75, 159, 63.75) = (64, 191, 64) */
|
||||
|
||||
background-color: rgb(64, 191, 64);
|
||||
}
|
||||
|
||||
.topright {
|
||||
float:left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width:200px;
|
||||
height: 100px;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="topleft"></div>
|
||||
<div class="reftest topright"></div>
|
||||
<div class="reftest bottom"></div>
|
||||
|
||||
</html>
|
||||
22
layout/reftests/css-blending/background-blending-alpha.html
Normal file
22
layout/reftests/css-blending/background-blending-alpha.html
Normal file
@ -0,0 +1,22 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 100px 100px, 200px 200px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: url(as-image/green100x100_alpha.png);
|
||||
background-color: rgba(0, 255, 0, 0.5);
|
||||
background-blend-mode: difference;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 100px 100px, 200px 200px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: linear-gradient(rgb(0,255,255), rgb(255,255,0));
|
||||
background-color: rgb(0,255,0);
|
||||
}
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,22 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 100px 100px, 200px 200px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: linear-gradient(rgb(0,0,255), rgb(255,0,0));
|
||||
background-color: rgb(0,255,0);
|
||||
background-blend-mode: difference;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 100px 100px, 200px 200px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: url(as-image/black100x100.png),
|
||||
linear-gradient(rgb(0,0,255), rgb(255,0,0), rgb(0, 0, 255));
|
||||
}
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,22 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 100px 100px, 200px 200px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: linear-gradient(rgb(0,0,255), rgb(255,0,0)),
|
||||
linear-gradient(rgb(0,0,255), rgb(255,0,0), rgb(0,0,255));
|
||||
background-blend-mode: difference;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 100px 100px, 200px 200px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: linear-gradient(rgb(0,255,255), rgb(255,255,0));
|
||||
background-color: rgb(0,255,0);
|
||||
}
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,21 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 100px 100px, 200px 200px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: linear-gradient(rgb(0,0,255), rgb(255,0,0)), url(as-image/green_square.svg);
|
||||
background-blend-mode: difference;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<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;
|
||||
}
|
||||
|
||||
.jpg {
|
||||
background-image: url(as-image/green100x100.jpg);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend jpg"></div>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<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;
|
||||
}
|
||||
|
||||
.png {
|
||||
background-image: url(as-image/green100x100.png);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend png"></div>
|
||||
</html>
|
||||
@ -0,0 +1,21 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 100px 100px, 200px 200px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: url(as-image/black100x100.png);
|
||||
background-color: rgb(0,255,0);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,25 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<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(as-image/green_square.svg);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend svg"></div>
|
||||
</html>
|
||||
@ -0,0 +1,21 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 200px 200px, 100px 100px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: url(as-image/green_square.svg), linear-gradient(rgb(0,0,255), rgb(255,0,0));
|
||||
background-blend-mode: difference;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 100px 100px, 200px 200px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: url(as-image/black100x100.png);
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,22 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: 100px 100px, 200px 200px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-image: url(as-image/green100x100.png),
|
||||
url(as-image/green_square.svg);
|
||||
background-blend-mode: difference;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.image {
|
||||
background-image: url(as-image/green100x100.png);
|
||||
}
|
||||
|
||||
.color {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest image"></div>
|
||||
<div class="reftest color"></div>
|
||||
</html>
|
||||
@ -0,0 +1,31 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.image {
|
||||
background-image: url(as-image/green100x100.png);
|
||||
background-blend-mode: difference;
|
||||
}
|
||||
|
||||
.color {
|
||||
background-color: rgb(0, 255, 0);
|
||||
background-blend-mode: difference;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div class="reftest image"></div>
|
||||
<div class="reftest color"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,33 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
.second {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
.third {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.fourth {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest first"></div>
|
||||
<div class="reftest second"></div>
|
||||
<div class="reftest third"></div>
|
||||
<div class="reftest fourth"></div>
|
||||
</html>
|
||||
@ -0,0 +1,24 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-size: 100px 100px, 200px 100px, 300px 100px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-color: rgb(0, 255, 0);
|
||||
background-blend-mode: multiply, screen;
|
||||
background-image: url(as-image/red100x100.png),
|
||||
url(as-image/green100x100.png),
|
||||
url(as-image/red100x100.png);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -0,0 +1,33 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
.second {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
.third {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
.fourth {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest first"></div>
|
||||
<div class="reftest second"></div>
|
||||
<div class="reftest third"></div>
|
||||
<div class="reftest fourth"></div>
|
||||
</html>
|
||||
@ -0,0 +1,24 @@
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<style>
|
||||
.reftest {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-size: 100px 100px, 200px 100px, 300px 100px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.blend {
|
||||
background-color: rgb(0, 255, 0);
|
||||
background-blend-mode: difference, exclusion, screen;
|
||||
background-image: url(as-image/red100x100.png),
|
||||
url(as-image/green100x100.png),
|
||||
url(as-image/blue100x100.png);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="reftest blend"></div>
|
||||
</html>
|
||||
@ -3,3 +3,16 @@ pref(layout.css.mix-blend-mode.enabled,true) == blend-constant-background-color.
|
||||
pref(layout.css.mix-blend-mode.enabled,true) == blend-gradient-background-color.html blend-gradient-background-color-ref.html
|
||||
pref(layout.css.mix-blend-mode.enabled,true) == blend-image.html blend-image-ref.html
|
||||
pref(layout.css.mix-blend-mode.enabled,true) == blend-difference-stacking.html blend-difference-stacking-ref.html
|
||||
|
||||
pref(layout.css.background-blend-mode.enabled,true) == background-blending-alpha.html background-blending-alpha-ref.html
|
||||
pref(layout.css.background-blend-mode.enabled,true) == background-blending-gradient-color.html background-blending-gradient-color-ref.html
|
||||
fuzzy-if(azureSkiaGL,3,7597) fuzzy-if(azureQuartz,3,7597) fuzzy-if(d2d,1,3800) pref(layout.css.background-blend-mode.enabled,true) == background-blending-gradient-gradient.html background-blending-gradient-gradient-ref.html
|
||||
fuzzy-if(azureSkiaGL,2,7174) fuzzy-if(azureQuartz,2,7174) pref(layout.css.background-blend-mode.enabled,true) == background-blending-gradient-image.html background-blending-gradient-color-ref.html
|
||||
fuzzy-if(azureQuartz,2,10000) fuzzy-if(azureSkia||d2d||gtk2Widget,1,10000) pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-jpg.html background-blending-image-color-ref.html
|
||||
pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-png.html background-blending-image-color-ref.html
|
||||
pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-svg.html background-blending-image-color-ref.html
|
||||
fuzzy-if(azureSkiaGL,2,7174) fuzzy-if(azureQuartz,2,7174) pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-gradient.html background-blending-gradient-color-ref.html
|
||||
pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-image.html background-blending-image-color-ref.html
|
||||
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
|
||||
|
||||
@ -213,6 +213,7 @@ MOCHITEST_FILES = test_acid3_test46.html \
|
||||
bug732209-css.sjs \
|
||||
test_bug795520.html \
|
||||
viewport_units_iframe.html \
|
||||
test_background_blend_mode.html \
|
||||
$(NULL)
|
||||
|
||||
VISITED_REFTEST_FILES = \
|
||||
|
||||
51
layout/style/test/test_background_blend_mode.html
Normal file
51
layout/style/test/test_background_blend_mode.html
Normal file
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test for miscellaneous computed style issues</title>
|
||||
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
|
||||
<p id="display"></p>
|
||||
<div id="content" style="display: none">
|
||||
|
||||
</div>
|
||||
<pre id="test">
|
||||
<script type="application/javascript">
|
||||
|
||||
/** Test for miscellaneous computed style issues **/
|
||||
|
||||
var frame_container = document.getElementById("display");
|
||||
var noframe_container = document.getElementById("content");
|
||||
|
||||
(function test_bug_841601() {
|
||||
// Test handling of background-blend-mode
|
||||
var p = document.createElement("p");
|
||||
var cs = getComputedStyle(p, "");
|
||||
|
||||
frame_container.appendChild(p);
|
||||
is(cs.backgroundBlendMode, "normal",
|
||||
"default value of background-blend-mode");
|
||||
|
||||
p.setAttribute("style", "background-blend-mode: normal, invalid");
|
||||
cs = getComputedStyle(p, "");
|
||||
is(cs.backgroundBlendMode, "normal",
|
||||
"set invalid blendmode");
|
||||
|
||||
p.setAttribute("style", "background-blend-mode: normal, normal");
|
||||
cs = getComputedStyle(p, "");
|
||||
is(cs.backgroundBlendMode, "normal, normal",
|
||||
"set normal blendmode twice");
|
||||
|
||||
p.setAttribute("style", "background-blend-mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity");
|
||||
cs = getComputedStyle(p, "");
|
||||
is(cs.backgroundBlendMode, "normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity",
|
||||
"set all blendmodes");
|
||||
|
||||
p.parentNode.removeChild(p);
|
||||
})();
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user