Diff
Modified: trunk/LayoutTests/ChangeLog (168348 => 168349)
--- trunk/LayoutTests/ChangeLog 2014-05-06 03:12:54 UTC (rev 168348)
+++ trunk/LayoutTests/ChangeLog 2014-05-06 06:04:28 UTC (rev 168349)
@@ -1,3 +1,23 @@
+2014-05-05 Ion Rosca <[email protected]>
+
+ [CSS Blending] Add tests using blending and isolation for body and html elements.
+ https://bugs.webkit.org/show_bug.cgi?id=132325
+
+ Reviewed by Dirk Schulze.
+
+ * css3/compositing/blend-mode-body-child-background-color-expected.html: Added.
+ * css3/compositing/blend-mode-body-child-background-color.html: Added.
+ * css3/compositing/blend-mode-body-child-expected.html: Added.
+ * css3/compositing/blend-mode-body-child-isolate-background-color-expected.html: Added.
+ * css3/compositing/blend-mode-body-child-isolate-background-color.html: Added.
+ * css3/compositing/blend-mode-body-child-isolate-html-background-color-expected.html: Added.
+ * css3/compositing/blend-mode-body-child-isolate-html-background-color.html: Added.
+ * css3/compositing/blend-mode-body-child.html: Added.
+ * css3/compositing/blend-mode-body-element-expected.html: Added.
+ * css3/compositing/blend-mode-body-element.html: Added.
+ * css3/compositing/blend-mode-html-element-screen-expected.html: Added.
+ * css3/compositing/blend-mode-html-element-screen.html: Added.
+
2014-05-05 Andreas Kling <[email protected]>
Mark http/tests/media/hls/video-controls-live-stream.html as WontFix on Mountain Lion.
Added: trunk/LayoutTests/css3/compositing/blend-mode-body-child-background-color-expected.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-body-child-background-color-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-body-child-background-color-expected.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ p {
+ color: white;
+ }
+ body {
+ background-color: black;
+ }
+ </style>
+</head>
+
+<body>
+ <p>This file tests that a blending element will blend with body's black background.<br/>
+ Test passes if there is no red rectangle on the screen.</p>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-body-child-background-color.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-body-child-background-color.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-body-child-background-color.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ div {
+ width: 100px;
+ height: 100px;
+ background-color: #ff0000;
+ mix-blend-mode: multiply;
+ }
+ p {
+ color: white;
+ }
+ body {
+ background-color: black;
+ }
+ </style>
+</head>
+
+<body>
+ <p>This file tests that a blending element will blend with body's black background.<br/>
+ Test passes if there is no red rectangle on the screen.</p>
+ <div></div>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-body-child-expected.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-body-child-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-body-child-expected.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<body>
+ <p>This file tests that a blending element will blend with default white background.<br/>
+ Test passes if there is no red rectangle on the screen.</p>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-background-color-expected.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-background-color-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-background-color-expected.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ div {
+ width: 100px;
+ height: 100px;
+ background-color: #00ff00;
+ }
+ p {
+ color: white;
+ }
+ body {
+ background-color: black;
+ }
+ </style>
+</head>
+
+<body>
+ <p>This file tests that a blending element will not blend with body's black background when body creates a stacking context.<br/>
+ Test passes if you see a green rectangle on top of a black background.</p>
+ <div></div>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-background-color.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-background-color.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-background-color.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ div {
+ width: 100px;
+ height: 100px;
+ background-color: #00ff00;
+ mix-blend-mode: multiply;
+ }
+ p {
+ color: white;
+ }
+ body {
+ background-color: black;
+ isolation: isolate;
+ }
+ </style>
+</head>
+
+<body>
+ <p>This file tests that a blending element will not blend with body's black background when body creates a stacking context.<br/>
+ Test passes if you see a green rectangle on top of a black background.</p>
+ <div></div>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-html-background-color-expected.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-html-background-color-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-html-background-color-expected.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ div {
+ width: 100px;
+ height: 100px;
+ }
+ p {
+ color: white;
+ }
+ body {
+ background-color: black;
+ }
+ html {
+ background-color: green;
+ }
+ </style>
+</head>
+
+<body>
+ <p>This file tests that a blending element will blend with body's black background when the html element also has background-color and the body element isolates.<br/>
+ Test passes if you don't see any red rectangle.</p>
+ <div></div>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-html-background-color.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-html-background-color.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-body-child-isolate-html-background-color.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ div {
+ width: 100px;
+ height: 100px;
+ background-color: #ff0000;
+ mix-blend-mode: multiply;
+ }
+ p {
+ color: white;
+ }
+ body {
+ background-color: black;
+ isolation: isolate;
+ }
+ html {
+ background-color: green;
+ }
+ </style>
+</head>
+
+<body>
+ <p>This file tests that a blending element will blend with body's black background when the html element also has background-color and the body element isolates.<br/>
+ Test passes if you don't see any red rectangle.</p>
+ <div></div>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-body-child.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-body-child.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-body-child.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ div {
+ width: 100px;
+ height: 100px;
+ background-color: #ff0000;
+ mix-blend-mode: screen;
+ }
+ </style>
+</head>
+
+<body>
+ <p>This file tests that a blending element will blend with default white background.<br/>
+ Test passes if there is no red rectangle on the screen.</p>
+ <div></div>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-body-element-expected.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-body-element-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-body-element-expected.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ body {
+ background-color: green;
+ }
+ </style>
+</head>
+
+<body>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-body-element.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-body-element.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-body-element.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ div {
+ width: 100px;
+ height: 100px;
+ background-color: black;
+ }
+ body {
+ mix-blend-mode: difference;
+ background-color: green;
+ }
+ p {
+ color: black;
+ }
+ </style>
+</head>
+
+<body>
+ <p>This file tests that body element will blend with body's background-color.<br/>
+ Test passes if you see a clean green background.</p>
+ <div></div>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-html-element-screen-expected.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-html-element-screen-expected.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-html-element-screen-expected.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+<body>
+</body>
Added: trunk/LayoutTests/css3/compositing/blend-mode-html-element-screen.html (0 => 168349)
--- trunk/LayoutTests/css3/compositing/blend-mode-html-element-screen.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-html-element-screen.html 2014-05-06 06:04:28 UTC (rev 168349)
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<head>
+ <style>
+ div {
+ width: 100px;
+ height: 100px;
+ background-color: black;
+ }
+ html {
+ mix-blend-mode: screen;
+ background-color: green;
+ }
+ p {
+ color: black;
+ }
+ </style>
+</head>
+
+<body>
+ <p>This file tests that setting screen blend mode on the html element will hide all content from body.<br/>
+ Test passes if you see a clean white background.</p>
+ <div></div>
+</body>
