Diff
Modified: trunk/LayoutTests/ChangeLog (153783 => 153784)
--- trunk/LayoutTests/ChangeLog 2013-08-07 12:02:04 UTC (rev 153783)
+++ trunk/LayoutTests/ChangeLog 2013-08-07 13:42:54 UTC (rev 153784)
@@ -1,3 +1,28 @@
+2013-08-07 Mirela Budaes <[email protected]>
+
+ [CSS Blending] Add test suite to validate background blending with different properties
+ https://bugs.webkit.org/show_bug.cgi?id=118243
+
+ Reviewed by Dirk Schulze.
+
+ * css3/compositing/background-blend-mode-background-attachement-fixed-expected.html: Added.
+ * css3/compositing/background-blend-mode-background-attachement-fixed.html: Added.
+ * css3/compositing/background-blend-mode-background-clip-content-box-expected.html: Added.
+ * css3/compositing/background-blend-mode-background-clip-content-box.html: Added.
+ * css3/compositing/background-blend-mode-background-clip-padding-box-expected.html: Added.
+ * css3/compositing/background-blend-mode-background-clip-padding-box.html: Added.
+ * css3/compositing/background-blend-mode-background-origin-border-box-expected.html: Added.
+ * css3/compositing/background-blend-mode-background-origin-border-box.html: Added.
+ * css3/compositing/background-blend-mode-background-position-percentage-expected.html: Added.
+ * css3/compositing/background-blend-mode-background-position-percentage.html: Added.
+ * css3/compositing/background-blend-mode-background-repeat-no-repeat-expected.html: Added.
+ * css3/compositing/background-blend-mode-background-repeat-no-repeat.html: Added.
+ * css3/compositing/background-blend-mode-background-size-contain-expected.html: Added.
+ * css3/compositing/background-blend-mode-background-size-contain.html: Added.
+ * css3/compositing/background-blend-mode-background-size-cover-expected.html: Added.
+ * css3/compositing/background-blend-mode-background-size-cover.html: Added.
+ * css3/compositing/resources/white_square.svg: Added.
+
2013-08-07 Mihnea Ovidenie <[email protected]>
[CSSRegions] Wrong auto-height region computation for nested named flows
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-attachement-fixed-expected.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-attachement-fixed-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-attachement-fixed-expected.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -0,0 +1,20 @@
+<!-- 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;
+ -webkit-background-blend-mode: normal;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-attachement-fixed.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-attachement-fixed.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-attachement-fixed.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -0,0 +1,20 @@
+<!-- Blend a background image and a background color specifying background-attachment: fixed -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('resources/white_square.svg'), #777777;
+ background-attachment: fixed ;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ -webkit-background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-content-box-expected.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-content-box-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-content-box-expected.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -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;
+ -webkit-background-clip: content-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-content-box.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-content-box.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-content-box.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -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('resources/white_square.svg'), #777777;
+ -webkit-background-clip: content-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ -webkit-background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-padding-box-expected.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-padding-box-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-padding-box-expected.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -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;
+ -webkit-background-clip: padding-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-padding-box.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-padding-box.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-clip-padding-box.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -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('resources/white_square.svg'), #777777;
+ -webkit-background-clip: padding-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ -webkit-background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-origin-border-box-expected.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-origin-border-box-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-origin-border-box-expected.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -0,0 +1,21 @@
+<!-- Blend a background image and a background color specifying background-origin: border-box -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ border: 10px double;
+ padding: 10px;
+ background: #777777;
+ background-origin: border-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-origin-border-box.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-origin-border-box.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-origin-border-box.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -0,0 +1,22 @@
+<!-- Blend a background image and a background color specifying background-origin: border-box -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ border: 10px double;
+ padding: 10px;
+ background: url('resources/white_square.svg'), #777777;
+ background-origin: border-box;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ -webkit-background-blend-mode: multiply;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-position-percentage-expected.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-position-percentage-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-position-percentage-expected.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -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>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-position-percentage.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-position-percentage.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-position-percentage.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -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: url('resources/white_square.svg'), #777777;
+ background-position: 10% 10%;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div style="-webkit-background-blend-mode: multiply;"></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-repeat-no-repeat-expected.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-repeat-no-repeat-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-repeat-no-repeat-expected.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -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>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-repeat-no-repeat.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-repeat-no-repeat.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-repeat-no-repeat.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -0,0 +1,20 @@
+<!-- Blend a background image and a background color specifying background-repeat: no-repeat -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background-image: url('resources/white_square.svg');
+ background-color: #777777;
+ background-repeat: no-repeat;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div style="-webkit-background-blend-mode: multiply;"></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-contain-expected.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-contain-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-contain-expected.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -0,0 +1,18 @@
+<!-- Blend a background image and a background color specifying background-size: contain -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: #777777;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-contain.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-contain.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-contain.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -0,0 +1,19 @@
+<!-- Blend a background image and a background color specifying background-size: contain -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('resources/white_square.svg'), #777777;
+ background-size: contain;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div style="-webkit-background-blend-mode: multiply;"></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-cover-expected.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-cover-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-cover-expected.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -0,0 +1,18 @@
+<!-- Blend a background image and a background color specifying background-size: cover -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: #777777;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-cover.html (0 => 153784)
--- trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-cover.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/background-blend-mode-background-size-cover.html 2013-08-07 13:42:54 UTC (rev 153784)
@@ -0,0 +1,19 @@
+<!-- Blend a background image and a background color specifying background-size: cover -->
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ background: url('resources/white_square.svg'), #777777;
+ background-size: cover;
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+}
+</style>
+</head>
+
+<body>
+ <div style="-webkit-background-blend-mode: multiply;"></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/compositing/resources/white_square.svg (0 => 153784)
--- trunk/LayoutTests/css3/compositing/resources/white_square.svg (rev 0)
+++ trunk/LayoutTests/css3/compositing/resources/white_square.svg 2013-08-07 13:42:54 UTC (rev 153784)
@@ -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="#FFFFFF"/></svg>
+</svg>