Bug 1243675 - Part 5. Add mask-origin property reftest. r=dbaron
authorAstley Chen <aschen@mozilla.com>
Fri, 15 Apr 2016 12:06:12 +0800
changeset 293350 ceee74a15bb1e73d4d819927b84e56b46d838312
parent 293349 ac8b9a02deb5f704ec366021baec246074aa2428
child 293351 15a4d633bd2d983566e22a7989af17ed55fd9f21
push id30178
push usercbook@mozilla.com
push dateFri, 15 Apr 2016 09:42:06 +0000
treeherdermozilla-central@afd82f887093 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs1243675
milestone48.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1243675 - Part 5. Add mask-origin property reftest. r=dbaron MozReview-Commit-ID: AL2J2USBJmA
layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html
layout/reftests/w3c-css/submitted/masking/mask-origin-1.html
layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html
layout/reftests/w3c-css/submitted/masking/mask-origin-2.html
layout/reftests/w3c-css/submitted/masking/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+        position: relative;
+      }
+
+      div.inner {
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+        position: absolute;
+      }
+
+      #border { left: 4px; top: 1px; }
+      #padding { left: 10px; top: 9px; }
+      #content { left: 13px; top: 15px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="border"></div></div>
+    <div class="outer"><div class="inner" id="border"></div></div>
+    <div class="outer"><div class="inner" id="padding"></div></div>
+    <div class="outer"><div class="inner" id="content"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-origin">
+    <link rel="match" href="mask-origin-1-ref.html">
+    <meta name="assert" content="Test checks whether setting mask position area works correctly or not.">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.inner {
+        /*
+         * content box: 60 x 60
+         * padding box: 72 x 78
+         * border  box: 80 x 90
+         * margin  box: 86 x 94
+         */
+        margin: 1px 2px 3px 4px;
+        border: solid transparent;
+        border-width: 8px 2px 4px 6px;
+        padding: 6px 9px 12px 3px;
+        width: 60px;
+        height: 60px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+      }
+
+      #border { mask-origin: border-box; }
+      #padding { mask-origin: padding-box; }
+      #content { mask-origin: content-box; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner" id="border"></div></div>
+    <div class="outer"><div class="inner" id="padding"></div></div>
+    <div class="outer"><div class="inner" id="content"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 125px;
+        height: 125px;
+        position: relative;
+      }
+
+      div.inner {
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+        position: absolute;
+      }
+
+      #pos-left-auto { left: 0px; top: 22px; }
+      #pos-left-bottom { left: 0px; top: 44px; }
+      #pos-right-top { left: 36px; top: 0px; }
+      #pos-right-bottom { left: 36px; top: 44px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="pos-left-auto"></div></div>
+    <div class="outer"><div class="inner" id="pos-left-bottom"></div></div>
+    <div class="outer"><div class="inner" id="pos-right-top"></div></div>
+    <div class="outer"><div class="inner" id="pos-right-bottom"></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-origin">
+    <link rel="match" href="mask-origin-2-ref.html">
+    <meta name="assert" content="Test checks whether setting mask origin to margin-box works correctly or not.">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 125px;
+        height: 125px;
+      }
+
+      div.inner {
+        /*
+         * content box: 60 x 60
+         * padding box: 72 x 78
+         * border  box: 80 x 90
+         * margin  box: 86 x 94
+         */
+        margin: 1px 2px 3px 4px;
+        border: solid red;
+        border-width: 8px 2px 4px 6px;
+        padding: 6px 9px 12px 3px;
+        width: 60px;
+        height: 60px;
+        position: relative;
+        background-color: blue;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-origin: margin-box;
+      }
+
+      div.overflow {
+        position: absolute;
+        left: -10px;
+        top: -9px;
+        border: solid transparent;
+        border-width: 15px 13px 19px 13px;
+        width: 60px;
+        height: 60px;
+        background-color: purple;
+      }
+
+      #pos-left-auto { mask-position: left; }
+      #pos-left-bottom { mask-position: left bottom; }
+      #pos-right-top { mask-position: right top; }
+      #pos-right-bottom { mask-position: right bottom; }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner" id="pos-left-auto">
+        <div class="overflow"></div>
+      </div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-left-bottom">
+        <div class="overflow"></div>
+      </div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-right-top">
+        <div class="overflow"></div>
+      </div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-right-bottom">
+        <div class="overflow"></div>
+      </div>
+    </div>
+  </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/masking/reftest.list
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -36,8 +36,12 @@ fails == mask-position-4d.html mask-posi
 fails == mask-position-5.html mask-position-5-ref.html
 fails == mask-position-6.html mask-position-6-ref.html
 fails == mask-position-7.html mask-position-7-ref.html
 
 # mask-repeat test cases
 fails == mask-repeat-1.html mask-repeat-1-ref.html # bug 1258623
 fails == mask-repeat-2.html mask-repeat-2-ref.html # bug 1258626
 fails == mask-repeat-3.html mask-repeat-3-ref.html # bug 1258626
+
+# mask-origin test cases
+fails == mask-origin-1.html mask-origin-1-ref.html # bug 1258286
+fails == mask-origin-2.html mask-origin-2-ref.html # bug 1260094