Implementation of background-repeat space

webrender/res/prim_shared.glsl

@@ -375,38 +375,44 @@ PrimitiveInfo fetch_text_run_glyph(int index, out vec4 color, out vec4 uv_rect)
 
 struct Image {
     PrimitiveInfo info;
-    vec4 st_rect;               // Location of the image texture in the texture atlas.
-    vec4 stretch_size_uvkind;   // Size of the actual image.
+    vec4 st_rect;                        // Location of the image texture in the texture atlas.
+    vec4 stretch_size_and_tile_spacing;  // Size of the actual image and amount of space between
+                                         //     tiled instances of this image.
+    vec4 uvkind;                         // Type of texture coordinates.
 };
 
 Image fetch_image(int index) {
     Image image;
 
-    int offset = index * 5;
+    int offset = index * 6;
 
     image.info = unpack_prim_info(offset);
     image.st_rect = data[offset + 3];
-    image.stretch_size_uvkind = data[offset + 4];
+    image.stretch_size_and_tile_spacing = data[offset + 4];
+    image.uvkind = data[offset + 5];
 
     return image;
 }
 
 struct ImageClip {
     PrimitiveInfo info;
-    vec4 st_rect;               // Location of the image texture in the texture atlas.
-    vec4 stretch_size_uvkind;   // Size of the actual image.
+    vec4 st_rect;                        // Location of the image texture in the texture atlas.
+    vec4 stretch_size_and_tile_spacing;  // Size of the actual image and amount of space between
+                                         //     tiled instances of this image.
+    vec4 uvkind;                         // Type of texture coordinates.
     Clip clip;
 };
 
 ImageClip fetch_image_clip(int index) {
     ImageClip image;
 
-    int offset = index * 14;
+    int offset = index * 15;
 
     image.info = unpack_prim_info(offset);
     image.st_rect = data[offset + 3];
-    image.stretch_size_uvkind = data[offset + 4];
-    image.clip = unpack_clip(offset + 5);
+    image.stretch_size_and_tile_spacing = data[offset + 4];
+    image.uvkind = data[offset + 5];
+    image.clip = unpack_clip(offset + 6);
 
     return image;
 }

webrender/res/ps_image.fs.glsl

@@ -11,16 +11,19 @@ void main(void) {
 
     // We clamp the texture coordinate calculation here to the local rectangle boundaries,
     // which makes the edge of the texture stretch instead of repeat.
-    vec2 uv = clamp(pos, vLocalRect.xy, vLocalRect.xy + vLocalRect.zw);
-
-    uv = (uv - vLocalRect.xy) / vStretchSize;
+    vec2 relative_pos_in_rect =
+         clamp(pos, vLocalRect.xy, vLocalRect.xy + vLocalRect.zw) - vLocalRect.xy;
 #else
-    vec2 uv = vUv;
+    float alpha = 1.0;;
+    vec2 relative_pos_in_rect = vLocalPos;
 #endif
-    vec2 st = vTextureOffset + vTextureSize * fract(uv);
-#ifdef WR_FEATURE_TRANSFORM
+
+    // We calculate the particular tile this fragment belongs to, taking into
+    // account the spacing in between tiles. We only paint if our fragment does
+    // not fall into that spacing.
+    vec2 position_in_tile = mod(relative_pos_in_rect, vStretchSize + vTileSpacing);
+    vec2 st = vTextureOffset + ((position_in_tile / vStretchSize) * vTextureSize);
+    alpha = alpha * float(all(bvec2(step(position_in_tile, vStretchSize))));
+
     oFragColor = vec4(1, 1, 1, alpha) * texture(sDiffuse, st);
-#else
-    oFragColor = texture(sDiffuse, st);
-#endif
 }

webrender/res/ps_image.glsl

@@ -4,11 +4,13 @@
 
 flat varying vec2 vTextureOffset; // Offset of this image into the texture atlas.
 flat varying vec2 vTextureSize;   // Size of the image in the texture atlas.
+flat varying vec2 vTileSpacing;   // Amount of space between tiled instances of this image.
 
 #ifdef WR_FEATURE_TRANSFORM
 varying vec3 vLocalPos;
 flat varying vec4 vLocalRect;
 flat varying vec2 vStretchSize;
 #else
-varying vec2 vUv;                 // Location within the CSS box to draw.
+varying vec2 vLocalPos;
+flat varying vec2 vStretchSize;
 #endif

webrender/res/ps_image.vs.glsl

@@ -10,17 +10,18 @@ void main(void) {
     TransformVertexInfo vi = write_transform_vertex(image.info);
     vLocalRect = vi.clipped_local_rect;
     vLocalPos = vi.local_pos;
-    vStretchSize = image.stretch_size_uvkind.xy;
+    vStretchSize = image.stretch_size_and_tile_spacing.xy;
 #else
     VertexInfo vi = write_vertex(image.info);
-    vUv = (vi.local_clamped_pos - vi.local_rect.p0) / image.stretch_size_uvkind.xy;
+    vStretchSize = image.stretch_size_and_tile_spacing.xy;
+    vLocalPos = vi.local_clamped_pos - vi.local_rect.p0;
 #endif
 
     // vUv will contain how many times this image has wrapped around the image size.
     vec2 st0 = image.st_rect.xy;
     vec2 st1 = image.st_rect.zw;
 
-    switch (uint(image.stretch_size_uvkind.z)) {
+    switch (uint(image.uvkind.x)) {
         case UV_NORMALIZED:
             break;
         case UV_PIXEL: {
@@ -33,4 +34,5 @@ void main(void) {
 
     vTextureSize = st1 - st0;
     vTextureOffset = st0;
+    vTileSpacing = image.stretch_size_and_tile_spacing.zw;
 }

webrender/res/ps_image_clip.fs.glsl

@@ -11,17 +11,22 @@ void main(void) {
 
     // We clamp the texture coordinate calculation here to the local rectangle boundaries,
     // which makes the edge of the texture stretch instead of repeat.
-    vec2 uv = clamp(local_pos.xy, vLocalRect.xy, vLocalRect.xy + vLocalRect.zw);
-
-    uv = (uv - vLocalRect.xy) / vStretchSize;
+    vec2 pos_for_texture =
+         clamp(pos, vLocalRect.xy, vLocalRect.xy + vLocalRect.zw) - vLocalRect.xy;
 #else
     float alpha = 1;
     vec2 local_pos = vLocalPos;
-    vec2 uv = vUv;
+    vec2 relative_pos_in_rect = vLocalPos - vLocalRect.xy;
 #endif
 
-    vec2 st = vTextureOffset + vTextureSize * fract(uv);
-
     alpha = min(alpha, do_clip(local_pos, vClipRect, vClipRadius));
+
+    // We calculate the particular tile this fragment belongs to, taking into
+    // account the spacing in between tiles. We only paint if our fragment does
+    // not fall into that spacing.
+    vec2 position_in_tile = mod(relative_pos_in_rect, vStretchSize + vTileSpacing);
+    vec2 st = vTextureOffset + ((position_in_tile / vStretchSize) * vTextureSize);
+    alpha = alpha * float(all(bvec2(step(position_in_tile, vStretchSize))));
+
     oFragColor = texture(sDiffuse, st) * vec4(1, 1, 1, alpha);
 }

webrender/res/ps_image_clip.glsl

@@ -4,13 +4,14 @@
 
 flat varying vec2 vTextureOffset; // Offset of this image into the texture atlas.
 flat varying vec2 vTextureSize;   // Size of the image in the texture atlas.
+flat varying vec2 vTileSpacing;   // Amount of space between tiled instances of this image.
+flat varying vec2 vStretchSize;
 flat varying vec4 vClipRect;
 flat varying vec4 vClipRadius;
+flat varying vec4 vLocalRect;
 
 #ifdef WR_FEATURE_TRANSFORM
 varying vec3 vLocalPos;
-flat varying vec4 vLocalRect;
-flat varying vec2 vStretchSize;
 #else
 varying vec2 vLocalPos;
 varying vec2 vUv;                 // Location within the CSS box to draw.

webrender/res/ps_image_clip.vs.glsl

@@ -8,13 +8,11 @@ void main(void) {
 
 #ifdef WR_FEATURE_TRANSFORM
     TransformVertexInfo vi = write_transform_vertex(image.info);
-    vLocalRect = vi.clipped_local_rect;
     vLocalPos = vi.local_pos;
-    vStretchSize = image.stretch_size_uvkind.xy;
 #else
     VertexInfo vi = write_vertex(image.info);
-    vUv = (vi.local_clamped_pos - vi.local_rect.p0) / image.stretch_size_uvkind.xy;
     vLocalPos = vi.local_clamped_pos;
+    vLocalRect = image.info.local_rect;
 #endif
 
     vClipRect = vec4(image.clip.rect.xy, image.clip.rect.xy + image.clip.rect.zw);
@@ -26,7 +24,7 @@ void main(void) {
     vec2 st0 = image.st_rect.xy;
     vec2 st1 = image.st_rect.zw;
 
-    switch (uint(image.stretch_size_uvkind.z)) {
+    switch (uint(image.uvkind.x)) {
         case UV_NORMALIZED:
             break;
         case UV_PIXEL: {
@@ -39,4 +37,6 @@ void main(void) {
 
     vTextureSize = st1 - st0;
     vTextureOffset = st0;
+    vStretchSize = image.stretch_size_and_tile_spacing.xy;
+    vTileSpacing = image.stretch_size_and_tile_spacing.zw;
 }

webrender/src/frame.rs

@@ -568,6 +568,7 @@ impl Frame {
                                                   &item.clip.main,
                                                   clip,
                                                   &info.stretch_size,
+                                                  &info.tile_spacing,
                                                   info.image_key,
                                                   info.image_rendering);
                             }

webrender/src/tiling.rs

@@ -736,7 +736,7 @@ impl BorderPrimitive {
 
 #[derive(Debug)]
 enum ImagePrimitiveKind {
-    Image(ImageKey, ImageRendering, Size2D<f32>),
+    Image(ImageKey, ImageRendering, Size2D<f32>, Size2D<f32>),
     WebGL(WebGLContextId),
 }
 
@@ -816,9 +816,12 @@ impl Primitive {
         match self.details {
             PrimitiveDetails::Rectangle(ref primitive) => primitive.color.a == 1.0,
             PrimitiveDetails::Image(ImagePrimitive {
-                kind: ImagePrimitiveKind::Image(image_key, image_rendering, _),
+                kind: ImagePrimitiveKind::Image(image_key, image_rendering, _, tile_spacing),
                 ..
-            }) => resource_cache.get_image(image_key, image_rendering, frame_id).is_opaque,
+            }) => {
+                tile_spacing.width == 0.0 && tile_spacing.height == 0.0 &&
+                    resource_cache.get_image(image_key, image_rendering, frame_id).is_opaque
+            }
             _ => false,
         }
     }
@@ -883,6 +886,7 @@ impl Primitive {
                     uv0,
                     uv1,
                     stretch_size,
+                    tile_spacing,
                     uv_kind,
                 } = image.image_info(resource_cache, frame_id);
 
@@ -899,9 +903,11 @@ impl Primitive {
                             uv0: uv0,
                             uv1: uv1,
                             stretch_size: stretch_size.unwrap_or(self.rect.size),
+                            tile_spacing: tile_spacing,
                             uv_kind: pack_as_float(uv_kind as u32),
-                            clip: complex_clip.as_ref().clone(),
                             texture_id: texture_id,
+                            padding: [0, 0],
+                            clip: complex_clip.as_ref().clone(),
                         };
 
                         image.cache = Some(ImagePrimitiveCache::Clip(element));
@@ -918,8 +924,10 @@ impl Primitive {
                             uv0: uv0,
                             uv1: uv1,
                             stretch_size: stretch_size.unwrap_or(self.rect.size),
+                            tile_spacing: tile_spacing,
                             uv_kind: pack_as_float(uv_kind as u32),
                             texture_id: texture_id,
+                            padding: [0, 0],
                         };
 
                         image.cache = Some(ImagePrimitiveCache::Normal(element));
@@ -1401,7 +1409,7 @@ impl Primitive {
             }
             PrimitiveDetails::Image(ref details) => {
                 match details.kind {
-                    ImagePrimitiveKind::Image(image_key, image_rendering, _) => {
+                    ImagePrimitiveKind::Image(image_key, image_rendering, _, _) => {
                         resource_list.add_image(image_key, image_rendering);
                     }
                     ImagePrimitiveKind::WebGL(..) => {}
@@ -1841,8 +1849,10 @@ pub struct PackedImagePrimitive {
     uv0: Point2D<f32>,
     uv1: Point2D<f32>,
     stretch_size: Size2D<f32>,
+    tile_spacing: Size2D<f32>,
     uv_kind: f32,
     texture_id: TextureId,
+    padding: [u32; 2],
 }
 
 #[derive(Debug, Clone)]
@@ -1851,8 +1861,10 @@ pub struct PackedImagePrimitiveClip {
     uv0: Point2D<f32>,
     uv1: Point2D<f32>,
     stretch_size: Size2D<f32>,
+    tile_spacing: Size2D<f32>,
     uv_kind: f32,
     texture_id: TextureId,
+    padding: [u32; 2],
     clip: Clip,
 }
 
@@ -2977,12 +2989,14 @@ impl FrameBuilder {
                      clip_rect: &Rect<f32>,
                      clip: Option<Box<Clip>>,
                      stretch_size: &Size2D<f32>,
+                     tile_spacing: &Size2D<f32>,
                      image_key: ImageKey,
                      image_rendering: ImageRendering) {
         let prim = ImagePrimitive {
             kind: ImagePrimitiveKind::Image(image_key,
                                             image_rendering,
-                                            stretch_size.clone()),
+                                            stretch_size.clone(),
+                                            tile_spacing.clone()),
             cache: None,
         };
 
@@ -3487,12 +3501,13 @@ struct ImageInfo {
     uv1: Point2D<f32>,
     stretch_size: Option<Size2D<f32>>,
     uv_kind: TextureCoordKind,
+    tile_spacing: Size2D<f32>,
 }
 
 impl ImagePrimitive {
     fn image_info(&self, resource_cache: &ResourceCache, frame_id: FrameId) -> ImageInfo {
         match self.kind {
-            ImagePrimitiveKind::Image(image_key, image_rendering, stretch_size) => {
+            ImagePrimitiveKind::Image(image_key, image_rendering, stretch_size, tile_spacing) => {
                 let info = resource_cache.get_image(image_key, image_rendering, frame_id);
                 ImageInfo {
                     color_texture_id: info.texture_id,
@@ -3502,6 +3517,7 @@ impl ImagePrimitive {
                                       info.pixel_rect.bottom_right.y.0 as f32),
                     stretch_size: Some(stretch_size),
                     uv_kind: TextureCoordKind::Pixel,
+                    tile_spacing: tile_spacing,
                 }
             }
             ImagePrimitiveKind::WebGL(context_id) => {
@@ -3511,6 +3527,7 @@ impl ImagePrimitive {
                     uv1: Point2D::new(1.0, 1.0),
                     stretch_size: None,
                     uv_kind: TextureCoordKind::Normalized,
+                    tile_spacing: Size2D::zero(),
                 }
             }
         }

webrender_traits/src/display_list.rs

@@ -93,11 +93,13 @@ impl DisplayListBuilder {
                       rect: Rect<f32>,
                       clip: ClipRegion,
                       stretch_size: Size2D<f32>,
+                      tile_spacing: Size2D<f32>,
                       image_rendering: ImageRendering,
                       key: ImageKey) {
         let item = ImageDisplayItem {
             image_key: key,
             stretch_size: stretch_size,
+            tile_spacing: tile_spacing,
             image_rendering: image_rendering,
         };
 

webrender_traits/src/types.rs

@@ -286,6 +286,7 @@ pub struct IframeInfo {
 pub struct ImageDisplayItem {
     pub image_key: ImageKey,
     pub stretch_size: Size2D<f32>,
+    pub tile_spacing: Size2D<f32>,
     pub image_rendering: ImageRendering,
 }