Title: [153784] trunk/LayoutTests
Revision
153784
Author
[email protected]
Date
2013-08-07 06:42:54 -0700 (Wed, 07 Aug 2013)

Log Message

[CSS Blending] Add test suite to validate background blending with different properties
https://bugs.webkit.org/show_bug.cgi?id=118243

Patch by Mirela Budaes <[email protected]> on 2013-08-07
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.

Modified Paths

Added Paths

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>
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to