Revision 352027 of -moz-background-inline-policy

  • Revision slug: CSS/-moz-background-inline-policy
  • Revision title: -moz-background-inline-policy
  • Revision id: 352027
  • Created:
  • Creator: sawrubh
  • Is current revision? No
  • Comment Added browser compatibility information

Revision Content

{{ CSSMozExtensionRef() }}

Summary

In Gecko-based applications like Firefox, the -moz-background-inline-policy CSS property specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines. The choice of position has significant effects on repetition.

  • {{ Xref_cssinitial() }}: continuous
  • Applies to: inline elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

This property has been standardized in css3-background with the name box-decoration-break, except that box-decoration-break applies to borders in addition to backgrounds.  The continuous value is equivalent to slice, and the each-box value is equivalent to clone. An equivalent to the bounding-box value was not included in the standard, and the functionality is likely to be removed when the standard feature is implemented.

Syntax

-moz-background-inline-policy:  bounding-box | continuous | each-box

Values

bounding-box 
The background image is positioned (and repeated) in the smallest rectangle that contains all of the inline boxes for the element. It is then clipped to be visible only within those boxes, according to the {{ Cssxref("-moz-background-clip") }} property.
continuous
The background image is positioned (and repeated) as if the inline box were not broken across lines, and then this long rectangle is sliced into pieces for each line.
each-box
The background image is positioned (and repeated) separately for each box of the inline element. This means that an image with {{ Cssxref("background-repeat") }}: no-repeat may be repeated multiple times.

Examples

 

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatNo() }} 1.0 {{CompatGeckoDesktop(1.3)}} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

{{ languages( { "fr": "fr/CSS/-moz-background-inline-policy", "ja": "ja/CSS/-moz-background-inline-policy", "pl": "pl/CSS/-moz-background-inline-policy" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3 id="Summary">Summary</h3>
<p>In <a href="/en/Gecko" title="en/Gecko">Gecko</a>-based applications like Firefox, the<code> -moz-background-inline-policy </code>CSS property specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines. The choice of position has significant effects on repetition.</p>
<ul>
  <li>{{ Xref_cssinitial() }}: <code>continuous</code></li>
  <li>Applies to: inline elements</li>
  <li>{{ Xref_cssinherited() }}: no</li>
  <li>Media: {{ Xref_cssvisual() }}</li>
  <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<p>This property has been standardized in css3-background with the name <code>box-decoration-break</code>, except that <code>box-decoration-break</code> applies to borders in addition to backgrounds.&nbsp; The <code>continuous</code> value is equivalent to <code>slice</code>, and the <code>each-box</code> value is equivalent to <code>clone</code>. An equivalent to the <code>bounding-box</code> value was not included in the standard, and the functionality is likely to be removed when the standard feature is implemented.</p>
<h3 id="Syntax">Syntax</h3>
<pre>
-moz-background-inline-policy:  bounding-box | continuous | each-box
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    bounding-box&nbsp;</dt>
  <dd>
    The background image is positioned (and repeated) in the smallest rectangle that contains all of the inline boxes for the element. It is then clipped to be visible only within those boxes, according to the {{ Cssxref("-moz-background-clip") }} property.</dd>
  <dt>
    continuous</dt>
  <dd>
    The background image is positioned (and repeated) as if the inline box were not broken across lines, and then this long rectangle is sliced into pieces for each line.</dd>
  <dt>
    each-box</dt>
  <dd>
    The background image is positioned (and repeated) separately for each box of the inline element. This means that an image with {{ Cssxref("background-repeat") }}: <code>no-repeat</code> may be repeated multiple times.</dd>
</dl>
<h3 id="Examples">Examples</h3>
<ul>
  <li><a class="external" href="/samples/cssref/moz-background-inline-policy-example.html" title="samples/cssref/moz-background-inline-policy-example.html">Example showing the values of <code>-moz-background-inline-policy</code></a></li>
  <li><a class="external" href="http://hixie.ch/tests/adhoc/css/background/inline/policy/" title="http://hixie.ch/tests/adhoc/css/background/inline/policy/">hixie.ch/tests/adhoc/css/background/inline/policy/</a></li>
</ul>
<p>&nbsp;</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
  <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</th>
        </tr>
        <tr>
          <td>Basic support</td>
          <td>{{ CompatNo() }}</td>
          <td>1.0 {{CompatGeckoDesktop(1.3)}}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="compat-mobile">
    <table class="compat-table">
      <tbody>
        <tr>
          <th>Feature</th>
          <th>Android</th>
          <th>Chrome for Android</th>
          <th>Firefox Mobile (Gecko)</th>
          <th>IE Mobile</th>
          <th>Opera Mobile</th>
          <th>Safari Mobile</th>
        </tr>
        <tr>
          <td>Basic support</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatUnknown() }}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<p>{{ languages( { "fr": "fr/CSS/-moz-background-inline-policy", "ja": "ja/CSS/-moz-background-inline-policy", "pl": "pl/CSS/-moz-background-inline-policy" } ) }}</p>
Revert to this revision