Web Platform Team Blog

Adobe

decor

Making the web awesome

Repeat space and round available for mask-repeat and background-repeat properties in Webkit

As a part of the CSS Masking and CSS Backgrounds and Borders specifications, the -webkit-mask-repeat and background-repeat properties can have the values of round and space.

For example, let’s say we have a green div with the following style, which is located on a blue background:

div {
width: 250px;
height: 300px;
background-color: green;
-webkit-mask-image: url(star.png);
-webkit-mask-size: 91px 65px;
-webkit-mask-repeat: repeat;
}

where star.png is the following image:

star

As you can see from figure 1, because the mask image does not fit a whole number of times in the background positioning area (which is determined by the background-origin or -webkit-mask-origin properties), it gets clipped. To avoid this, we can specify a mask-repeat value of either round or space.

repeat

             Figure 1

Round

When using a value of round, the mask image gets scaled so that it will fit a whole number of times, as shown in figure 2. From the original size of 91px x 65px the image is shrunk to 83px x 60px, thus appearing exactly 3 times on the x-axis and 5 times on the y-axis. Quoting the spec: “In the case of the width (height is analogous): if X ≠ 0 is the width of the image and W is the width of the background positioning area, then the rounded width will be X’ = W / round(W / X) where round() is a function that returns the nearest natural number (integer greater than zero)”.

round

             Figure 2

Space

When using a value of space, the mask image is repeated as often as it fits in the background positioning area without being clipped. Then, the images are spaced out to fill the area, in such a way that the first and last images touch the edges of the area. Figure 3 shows how the masks are spaced so that 2 masks will appear on the x-axis and 4 masks on the y-axis.

space

             Figure 3

The repeat and space values also are implemented for the background-repeat property. While writing this blogpost we discovered that when resizing a window containing an element with a background-repeat: space value, the portion between the spaced images is not drawn. We will fix this here: https://bugs.webkit.org/show_bug.cgi?id=120607.

3 Comments

  1. September 23, 2013 at 1:11 pm, Louis said:

    It should also be noted that, although space/round for bgrepeat are not working in the latest stable Chrome, they actually produce a false positive when feature detecting them:

    https://github.com/Modernizr/Modernizr/commit/f5c1a9f6404e4e3473e71a754ac4e6d2d8b3935d

    And here’s the bug report I filed for this:

    https://bugs.webkit.org/show_bug.cgi?id=66270

    • September 24, 2013 at 2:02 am, Andrei Parvu said:

      Thanks for your comment, Louis!

      bgrepeat: round should be working in Chrome Canary, and we hope bgrepeat: round will be working soon.

  2. September 24, 2013 at 2:12 am, Louis said:

    Oh I just realized that was the webkit bug that I posted. Here is the one on the Chromium bug tracker:

    https://code.google.com/p/chromium/issues/detail?id=143325

    If that helps.