Implement 'round' and 'space' values for border-image
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 26 Oct 2015 18:39:05 +0000 (18:39 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 26 Oct 2015 18:39:05 +0000 (18:39 +0000)
https://bugs.webkit.org/show_bug.cgi?id=14185

Reviewed by Tim Horton.

Source/WebCore:

Add support for "round" and "space" values for border-image-repeat.
Following "stretch" and "repeat", the code is added to Image::drawTiled().

For "round", we compute an integral number of copies of the image that fit,
and then adjust the tile scale.

For "space", we also compute an integral number N of copies that will fit,
and then divide the remaining space amongst N+1 gaps, adjusting the tiling
phase so that with an even number of images, a gap is centered.

Tests: fast/borders/border-image-round.html
       fast/borders/border-image-space.html

* platform/graphics/Image.cpp:
(WebCore::Image::drawTiled):
* platform/graphics/cg/GraphicsContextCG.cpp:
(WebCore::GraphicsContext::drawPattern):

LayoutTests:

Ref tests that clip, leaving relevant parts of the images.

* fast/borders/border-image-round-expected.html: Added.
* fast/borders/border-image-round.html: Added.
* fast/borders/border-image-space-expected.html: Added.
* fast/borders/border-image-space.html: Added.
* fast/borders/resources/big-border-image-lines.png: Added.
* fast/borders/resources/big-border-image.png: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@191590 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/borders/border-image-round-expected.html [new file with mode: 0644]
LayoutTests/fast/borders/border-image-round.html [new file with mode: 0644]
LayoutTests/fast/borders/border-image-space-expected.html [new file with mode: 0644]
LayoutTests/fast/borders/border-image-space.html [new file with mode: 0644]
LayoutTests/fast/borders/resources/big-border-image-lines.png [new file with mode: 0644]
LayoutTests/fast/borders/resources/big-border-image.png [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/platform/graphics/Image.cpp
Source/WebCore/platform/graphics/cg/GraphicsContextCG.cpp

index 3a45a09..4ff1008 100644 (file)
@@ -1,5 +1,21 @@
 2015-10-26  Simon Fraser  <simon.fraser@apple.com>
 
+        Implement 'round' and 'space' values for border-image
+        https://bugs.webkit.org/show_bug.cgi?id=14185
+
+        Reviewed by Tim Horton.
+        
+        Ref tests that clip, leaving relevant parts of the images.
+
+        * fast/borders/border-image-round-expected.html: Added.
+        * fast/borders/border-image-round.html: Added.
+        * fast/borders/border-image-space-expected.html: Added.
+        * fast/borders/border-image-space.html: Added.
+        * fast/borders/resources/big-border-image-lines.png: Added.
+        * fast/borders/resources/big-border-image.png: Added.
+
+2015-10-26  Simon Fraser  <simon.fraser@apple.com>
+
         Incorrect repeated background-size behavior in keyframes
         https://bugs.webkit.org/show_bug.cgi?id=150309
 
diff --git a/LayoutTests/fast/borders/border-image-round-expected.html b/LayoutTests/fast/borders/border-image-round-expected.html
new file mode 100644 (file)
index 0000000..17b6f1a
--- /dev/null
@@ -0,0 +1,43 @@
+<html>
+<head>
+    <style>
+        div {
+            border-width: 50px 0 0 0;
+            margin: 10px;
+            width: 50px;
+            height: 50px;
+            box-sizing: border-box;
+            background-color: gray;
+            border-image: url('resources/big-border-image-lines.png') 30 70 60 40;
+            border-image-repeat: stretch;
+        }
+        
+        .one {
+            width: 159px;
+        }
+
+        .two {
+            width: 239px;
+        }
+
+        .three {
+            width: 319px;
+        }
+        
+        .vertical {
+            border-width: 0 50px 0 0;
+            width: 50px;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <div class="horizontal" style="width: 159px; -webkit-clip-path: inset(2px 120px 2px 6px);"></div>
+    <div class="horizontal" style="width: 239px; -webkit-clip-path: inset(2px 122px 2px 6px);"></div>
+    <div class="horizontal" style="width: 319px; -webkit-clip-path: inset(2px 220px 2px 6px);"></div>
+
+    <div class="vertical" style="height: 159px; -webkit-clip-path: inset(4px 2px 4px 2px);"></div>
+    <div class="vertical" style="height: 239px; -webkit-clip-path: inset(122px 2px 4px 2px);"></div>
+    <div class="vertical" style="height: 319px; -webkit-clip-path: inset(220px 2px 6px 2px);"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/borders/border-image-round.html b/LayoutTests/fast/borders/border-image-round.html
new file mode 100644 (file)
index 0000000..46f07a5
--- /dev/null
@@ -0,0 +1,44 @@
+<html>
+<head>
+    <style>
+        div {
+            border-width: 50px 0 0 0;
+            margin: 10px;
+            width: 50px;
+            height: 50px;
+            box-sizing: border-box;
+            background-color: gray;
+            border-image: url('resources/big-border-image-lines.png') 30 70 60 40;
+            border-image-repeat: round;
+        }
+        
+        .one {
+            width: 159px;
+        }
+
+        .two {
+            width: 239px;
+        }
+
+        .three {
+            width: 319px;
+        }
+        
+        .vertical {
+            border-width: 0 50px 0 0;
+            width: 50px;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <!-- Clip to remove the black borders of the source image -->
+    <div class="horizontal" style="width: 159px; -webkit-clip-path: inset(2px 120px 2px 6px);"></div>
+    <div class="horizontal" style="width: 239px; -webkit-clip-path: inset(2px 122px 2px 6px);"></div>
+    <div class="horizontal" style="width: 319px; -webkit-clip-path: inset(2px 220px 2px 6px);"></div>
+
+    <div class="vertical" style="height: 159px; -webkit-clip-path: inset(4px 2px 4px 2px);"></div>
+    <div class="vertical" style="height: 239px; -webkit-clip-path: inset(122px 2px 4px 2px);"></div>
+    <div class="vertical" style="height: 319px; -webkit-clip-path: inset(220px 2px 6px 2px);"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/borders/border-image-space-expected.html b/LayoutTests/fast/borders/border-image-space-expected.html
new file mode 100644 (file)
index 0000000..9adf849
--- /dev/null
@@ -0,0 +1,41 @@
+<html>
+<head>
+    <style>
+        div {
+            border-width: 50px 0 0 0;
+            margin: 10px;
+            width: 50px;
+            height: 50px;
+            box-sizing: border-box;
+            background-color: gray;
+        }
+        
+        .one {
+            width: 159px;
+        }
+
+        .two {
+            width: 239px;
+        }
+
+        .three {
+            width: 319px;
+        }
+        
+        .vertical {
+            border-width: 0 50px 0 0;
+            width: 50px;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <div class="horizontal" style="width: 159px; -webkit-clip-path: inset(0 120px 0 0)"></div>
+    <div class="horizontal" style="width: 239px; -webkit-clip-path: inset(0 110px 0 110px)"></div>
+    <div class="horizontal" style="width: 319px; -webkit-clip-path: inset(0 200px 0 100px)"></div>
+
+    <div class="vertical" style="height: 159px; -webkit-clip-path: inset(0 0 130px 0)"></div>
+    <div class="vertical" style="height: 239px; -webkit-clip-path: inset(112px 0 112px 0)"></div>
+    <div class="vertical" style="height: 319px; -webkit-clip-path: inset(102px 0 206px 0)"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/borders/border-image-space.html b/LayoutTests/fast/borders/border-image-space.html
new file mode 100644 (file)
index 0000000..f716e4c
--- /dev/null
@@ -0,0 +1,44 @@
+<html>
+<head>
+    <style>
+        div {
+            border-width: 50px 0 0 0;
+            margin: 10px;
+            width: 50px;
+            height: 50px;
+            box-sizing: border-box;
+            background-color: gray;
+            border-image: url('resources/big-border-image.png') 30 70 60 40;
+            border-image-repeat: space;
+        }
+        
+        .one {
+            width: 159px;
+        }
+
+        .two {
+            width: 239px;
+        }
+
+        .three {
+            width: 319px;
+        }
+        
+        .vertical {
+            border-width: 0 50px 0 0;
+            width: 50px;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <!-- Clip to reveal the gaps between the spaced imges -->
+    <div class="horizontal" style="width: 159px; -webkit-clip-path: inset(0 120px 0 0)"></div>
+    <div class="horizontal" style="width: 239px; -webkit-clip-path: inset(0 110px 0 110px)"></div>
+    <div class="horizontal" style="width: 319px; -webkit-clip-path: inset(0 200px 0 100px)"></div>
+
+    <div class="vertical" style="height: 159px; -webkit-clip-path: inset(0 0 130px 0)"></div>
+    <div class="vertical" style="height: 239px; -webkit-clip-path: inset(112px 0 112px 0)"></div>
+    <div class="vertical" style="height: 319px; -webkit-clip-path: inset(102px 0 206px 0)"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/borders/resources/big-border-image-lines.png b/LayoutTests/fast/borders/resources/big-border-image-lines.png
new file mode 100644 (file)
index 0000000..8cf4d46
Binary files /dev/null and b/LayoutTests/fast/borders/resources/big-border-image-lines.png differ
diff --git a/LayoutTests/fast/borders/resources/big-border-image.png b/LayoutTests/fast/borders/resources/big-border-image.png
new file mode 100644 (file)
index 0000000..d2fdb34
Binary files /dev/null and b/LayoutTests/fast/borders/resources/big-border-image.png differ
index ee5f947..3082c8d 100644 (file)
@@ -1,5 +1,30 @@
 2015-10-26  Simon Fraser  <simon.fraser@apple.com>
 
+        Implement 'round' and 'space' values for border-image
+        https://bugs.webkit.org/show_bug.cgi?id=14185
+
+        Reviewed by Tim Horton.
+        
+        Add support for "round" and "space" values for border-image-repeat.
+        Following "stretch" and "repeat", the code is added to Image::drawTiled().
+        
+        For "round", we compute an integral number of copies of the image that fit,
+        and then adjust the tile scale.
+        
+        For "space", we also compute an integral number N of copies that will fit,
+        and then divide the remaining space amongst N+1 gaps, adjusting the tiling
+        phase so that with an even number of images, a gap is centered.
+
+        Tests: fast/borders/border-image-round.html
+               fast/borders/border-image-space.html
+
+        * platform/graphics/Image.cpp:
+        (WebCore::Image::drawTiled):
+        * platform/graphics/cg/GraphicsContextCG.cpp:
+        (WebCore::GraphicsContext::drawPattern):
+
+2015-10-26  Simon Fraser  <simon.fraser@apple.com>
+
         Incorrect repeated background-size behavior in keyframes
         https://bugs.webkit.org/show_bug.cgi?id=150309
 
index 3f0e88b..f9971a0 100644 (file)
@@ -214,27 +214,73 @@ void Image::drawTiled(GraphicsContext& ctxt, const FloatRect& dstRect, const Flo
         return;
     }
     
-    // FIXME: We do not support 'round' or 'space' yet. For now just map them to 'repeat'.
-    if (hRule == RoundTile || hRule == SpaceTile)
-        hRule = RepeatTile;
-    if (vRule == RoundTile || vRule == SpaceTile)
-        vRule = RepeatTile;
+    FloatSize tileScale = tileScaleFactor;
+    FloatSize spacing;
+    
+    // FIXME: These rules follow CSS border-image rules, but they should not be down here in Image.
+    bool centerOnGapHorizonally = false;
+    bool centerOnGapVertically = false;
+    switch (hRule) {
+    case RoundTile: {
+        int numItems = std::max<int>(floorf(dstRect.width() / srcRect.width()), 1);
+        tileScale.setWidth(dstRect.width() / (srcRect.width() * numItems));
+        break;
+    }
+    case SpaceTile: {
+        int numItems = floorf(dstRect.width() / srcRect.width());
+        if (!numItems)
+            return;
+        spacing.setWidth((dstRect.width() - srcRect.width() * numItems) / (numItems + 1));
+        tileScale.setWidth(1);
+        centerOnGapHorizonally = !(numItems & 1);
+        break;
+    }
+    case StretchTile:
+    case RepeatTile:
+        break;
+    }
 
-    AffineTransform patternTransform = AffineTransform().scaleNonUniform(tileScaleFactor.width(), tileScaleFactor.height());
+    switch (vRule) {
+    case RoundTile: {
+        int numItems = std::max<int>(floorf(dstRect.height() / srcRect.height()), 1);
+        tileScale.setHeight(dstRect.height() / (srcRect.height() * numItems));
+        break;
+        }
+    case SpaceTile: {
+        int numItems = floorf(dstRect.height() / srcRect.height());
+        if (!numItems)
+            return;
+        spacing.setHeight((dstRect.height() - srcRect.height() * numItems) / (numItems + 1));
+        tileScale.setHeight(1);
+        centerOnGapVertically = !(numItems & 1);
+        break;
+    }
+    case StretchTile:
+    case RepeatTile:
+        break;
+    }
+
+    AffineTransform patternTransform = AffineTransform().scaleNonUniform(tileScale.width(), tileScale.height());
 
     // We want to construct the phase such that the pattern is centered (when stretch is not
     // set for a particular rule).
-    float hPhase = tileScaleFactor.width() * srcRect.x();
-    float vPhase = tileScaleFactor.height() * srcRect.y();
-    float scaledTileWidth = tileScaleFactor.width() * srcRect.width();
-    float scaledTileHeight = tileScaleFactor.height() * srcRect.height();
-    if (hRule == Image::RepeatTile)
+    float hPhase = tileScale.width() * srcRect.x();
+    float vPhase = tileScale.height() * srcRect.y();
+    float scaledTileWidth = tileScale.width() * srcRect.width();
+    float scaledTileHeight = tileScale.height() * srcRect.height();
+
+    if (centerOnGapHorizonally)
+        hPhase -= spacing.width();
+    else if (hRule == Image::RepeatTile || hRule == Image::SpaceTile)
         hPhase -= (dstRect.width() - scaledTileWidth) / 2;
-    if (vRule == Image::RepeatTile)
-        vPhase -= (dstRect.height() - scaledTileHeight) / 2; 
+
+    if (centerOnGapVertically)
+        vPhase -= spacing.height();
+    else if (vRule == Image::RepeatTile || vRule == Image::SpaceTile)
+        vPhase -= (dstRect.height() - scaledTileHeight) / 2;
+
     FloatPoint patternPhase(dstRect.x() - hPhase, dstRect.y() - vPhase);
-    
-    drawPattern(ctxt, srcRect, patternTransform, patternPhase, FloatSize(), styleColorSpace, op, dstRect);
+    drawPattern(ctxt, srcRect, patternTransform, patternPhase, spacing, styleColorSpace, op, dstRect);
 
 #if PLATFORM(IOS)
     startAnimation(DoNotCatchUp);
index f3ecc82..7990504 100644 (file)
@@ -327,9 +327,11 @@ void GraphicsContext::drawPattern(Image& image, const FloatRect& tileRect, const
     // fall back to the less efficient CGPattern-based mechanism.
     float scaledTileWidth = tileRect.width() * narrowPrecisionToFloat(patternTransform.a());
     float w = CGImageGetWidth(tileImage);
-    if (w == image.size().width() && h == image.size().height() && !spacing.width() && !spacing.height())
+    if (w == image.size().width() && h == image.size().height() && !spacing.width() && !spacing.height()) {
+        // FIXME: CG seems to snap the images to integral sizes. When we care (e.g. with border-image-repeat: round),
+        // we should tile all but the last, and stetch the last image to fit.
         CGContextDrawTiledImage(context, FloatRect(adjustedX, adjustedY, scaledTileWidth, scaledTileHeight), subImage.get());
-    else {
+    else {
         static const CGPatternCallbacks patternCallbacks = { 0, drawPatternCallback, patternReleaseCallback };
         CGAffineTransform matrix = CGAffineTransformMake(narrowPrecisionToCGFloat(patternTransform.a()), 0, 0, narrowPrecisionToCGFloat(patternTransform.d()), adjustedX, adjustedY);
         matrix = CGAffineTransformConcat(matrix, CGContextGetCTM(context));
@@ -358,7 +360,7 @@ void GraphicsContext::drawPattern(Image& image, const FloatRect& tileRect, const
         CGContextSetPatternPhase(context, CGSizeZero);
 
         CGContextSetFillColorWithColor(context, color.get());
-        CGContextFillRect(context, CGContextGetClipBoundingBox(context));
+        CGContextFillRect(context, CGContextGetClipBoundingBox(context)); // FIXME: we know the clip; we set it above.
     }
 }