Revision 1028060 of mask-origin

<div>{{CSSRef}}{{SeeCompatTable}}</div>

<h2 id="Summary">Summary</h2>

<p>The <strong><code>mask-origin</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property determines the origin of a mask.</p>

<p>For elements rendered as a single box, this property specifies the mask positioning area. In other words, this property specifies the origin position of an image specified by the {{cssxref("mask-image")}} CSS property. For elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes {{cssxref("box-decoration-break")}} operates upon to determine the mask positioning area.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">
/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Multiple values */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* Global values */
mask-origin: inherit;
mask-origin: initial;
mask-origin: unset;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>content-box</code></dt>
 <dd>The position is relative to the content box.</dd>
 <dt><code>padding-box</code></dt>
 <dd>The position is relative to the padding box. For single boxes <code>0 0</code> is the upper left corner of the padding edge, <code>100% 100%</code> is the lower right corner.</dd>
 <dt><code>border-box</code></dt>
 <dd>The position is relative to the border box.</dd>
 <dt><code>margin-box</code></dt>
 <dd>The position is relative to the margin box.</dd>
 <dt><code>fill-box</code></dt>
 <dd>The position is relative to the object bounding box.</dd>
 <dt><code>stroke-box</code></dt>
 <dd>The position is relative to the stroke bounding box.</dd>
 <dt><code>view-box</code></dt>
 <dd>Uses the nearest SVG viewport as reference box. If a <code><a href="/en-US/docs/Web/SVG/Attribute/viewBox">viewBox</a></code> attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Example">Example</h2>

<p>{{TODO}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}}</td>
   <td>{{Spec2("CSS Masks")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE&nbsp;Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Gecko currently doesn't implement this feature. See {{bug("1251161")}}.</p>