composited mask test for CSS3 calc
authormikelawther@chromium.org <mikelawther@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 7 Feb 2012 19:18:19 +0000 (19:18 +0000)
committermikelawther@chromium.org <mikelawther@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 7 Feb 2012 19:18:19 +0000 (19:18 +0000)
https://bugs.webkit.org/show_bug.cgi?id=76006

Reviewed by Ojan Vafai.

Tests for future implementation of CSS3 calc() (see http://webkit.org/b/16662)

These tests are expected to 'fail', and will pass once calc() functionality is landed.
For now, they serve to demonstrate that the current code doesn't crash on these tests.

* css3/calc/resources/alpha-gradient.png: Added.
* css3/calc/simple-composited-mask-expected-mismatch.html: Added.
* css3/calc/simple-composited-mask.html: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@106963 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css3/calc/resources/alpha-gradient.png [new file with mode: 0644]
LayoutTests/css3/calc/simple-composited-mask-expected-mismatch.html [new file with mode: 0644]
LayoutTests/css3/calc/simple-composited-mask.html [new file with mode: 0644]

index 125ec06..7e693d5 100644 (file)
@@ -1,3 +1,19 @@
+2012-02-07  Mike Lawther  <mikelawther@chromium.org>
+
+        composited mask test for CSS3 calc
+        https://bugs.webkit.org/show_bug.cgi?id=76006
+
+        Reviewed by Ojan Vafai.
+
+        Tests for future implementation of CSS3 calc() (see http://webkit.org/b/16662)
+
+        These tests are expected to 'fail', and will pass once calc() functionality is landed.
+        For now, they serve to demonstrate that the current code doesn't crash on these tests.
+
+        * css3/calc/resources/alpha-gradient.png: Added.
+        * css3/calc/simple-composited-mask-expected-mismatch.html: Added.
+        * css3/calc/simple-composited-mask.html: Added.
+
 2012-02-07  Ami Fischman  <fischman@chromium.org>
 
         [Chromium] media/track/track-cue-nothing-to-render.html fails intermittently on Mac
diff --git a/LayoutTests/css3/calc/resources/alpha-gradient.png b/LayoutTests/css3/calc/resources/alpha-gradient.png
new file mode 100644 (file)
index 0000000..d182eb9
Binary files /dev/null and b/LayoutTests/css3/calc/resources/alpha-gradient.png differ
diff --git a/LayoutTests/css3/calc/simple-composited-mask-expected-mismatch.html b/LayoutTests/css3/calc/simple-composited-mask-expected-mismatch.html
new file mode 100644 (file)
index 0000000..c090945
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<style>
+    #container {
+        height: 760px;
+        width: 260px;
+        border: solid black;
+        display: inline-block;
+    }
+    .box {
+        position: relative;
+        width: 200px;
+        height: 200px;
+        margin: 30px;
+        border: 10px solid black;
+        background-color: rgba(100, 100, 255, 0.8);
+        -webkit-box-sizing: border-box;
+        -webkit-box-shadow: black 0 4px 4px;
+    }
+
+    #container .masked {
+        -webkit-mask-image: url(resources/alpha-gradient.png);
+        -webkit-mask-repeat: repeat;
+        -webkit-mask-size: 50px;
+    }
+</style>
+<p>Testing masks on compositing layers.</p>
+<div id="container">
+    <div class="masked box"></div>
+    <div class="masked box"></div>
+    <div class="masked box"></div>
+</div>
diff --git a/LayoutTests/css3/calc/simple-composited-mask.html b/LayoutTests/css3/calc/simple-composited-mask.html
new file mode 100644 (file)
index 0000000..834bfd7
--- /dev/null
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<style>
+    #container {
+        height: 760px;
+        width: 260px;
+        border: solid black;
+        display: inline-block;
+    }
+    .box {
+        position: relative;
+        width: 200px;
+        height: 200px;
+        margin: 30px;
+        border: 10px solid black;
+        background-color: rgba(100, 100, 255, 0.8);
+        -webkit-box-sizing: border-box;
+        -webkit-box-shadow: black 0 4px 4px;
+    }
+
+    #container .masked-px {
+        -webkit-mask-image: url(resources/alpha-gradient.png);
+        -webkit-mask-repeat: repeat;
+        -webkit-mask-size: -webkit-calc(50px);
+    }
+
+    #container .masked-percent {
+        -webkit-mask-image: url(resources/alpha-gradient.png);
+        -webkit-mask-repeat: repeat;
+        -webkit-mask-size: -webkit-calc(25%);
+    }
+
+    #container .masked-percent-px {
+        -webkit-mask-image: url(resources/alpha-gradient.png);
+        -webkit-mask-repeat: repeat;
+        -webkit-mask-size: -webkit-calc(10% + 30px);
+    }
+</style>
+<p>Testing masks on compositing layers.</p>
+<div id="container">
+    <div class="masked-px box"></div>
+    <div class="masked-percent box"></div>
+    <div class="masked-percent-px box"></div>
+</div>