Attachment 372014 Details for Bug 198746 – Patch

[patch] Patch

bug-198746-20190613110538.patch (text/plain), 21.25 KB, created by Fujii Hironori on 2019-06-12 19:05:39 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Fujii Hironori

Created: 2019-06-12 19:05:39 PDT

Size: 21.25 KB

patch

obsolete

>Subversion Revision: 246095
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index d6f7a003498a64ad8fe2546a67254218032faef1..3694a654b03a4dabc2341ed2b45676762af17774 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,41 @@
>+2019-06-12  Carlos Garcia Campos  <cgarcia@igalia.com>
>+
>+        [cairo][SVG] If clipPath has multiple elements, clip-path doesn't work with transform
>+        https://bugs.webkit.org/show_bug.cgi?id=198746
>+
>+        Reviewed by Don Olmstead.
>+
>+        We need to save the current transformation matrix at the moment the image mask is set and set it again on
>+        restore right before applying the mask. This patch also creates a pattern for the image mask surface and set its
>+        transformation matrix according to the mask position, so that we don't need to save the mask rectangle too.
>+
>+        Tests: svg/clip-path/clip-hidpi-expected.svg
>+               svg/clip-path/clip-hidpi.svg
>+               svg/clip-path/clip-opacity-translate-expected.svg
>+               svg/clip-path/clip-opacity-translate.svg
>+
>+        * platform/graphics/cairo/PlatformContextCairo.cpp:
>+        (WebCore::PlatformContextCairo::restore):
>+        (WebCore::PlatformContextCairo::pushImageMask):
>+
>+2019-06-12  Fujii Hironori  <Hironori.Fujii@sony.com>
>+
>+        [cairo][SVG] Putting multiple path elements in clippath causes rendering artifacts
>+        https://bugs.webkit.org/show_bug.cgi?id=198701
>+
>+        PlatformContextCairo::pushImageMask blits wrong position of the
>+        surface to the background of masking objects. And, I don't know
>+        the reason why this blitting is needed. Removed the blitting.
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Tests: svg/clip-path/clip-opacity.html
>+               svg/clip-path/svg-in-html.html
>+
>+        * platform/graphics/cairo/PlatformContextCairo.cpp:
>+        (WebCore::PlatformContextCairo::pushImageMask): Don't blit the
>+        surface to the background.
>+
> 2019-06-04  Michael Catanzaro  <mcatanzaro@igalia.com>
> 
>         Fix miscellaneous build warnings
>diff --git a/Source/WebCore/platform/graphics/cairo/PlatformContextCairo.cpp b/Source/WebCore/platform/graphics/cairo/PlatformContextCairo.cpp
>index eeeae86ef83a76f2014c4023a353c6f2ff1570df..62e517431df3424b59738f8b2ac1a6f88e907139 100644
>--- a/Source/WebCore/platform/graphics/cairo/PlatformContextCairo.cpp
>+++ b/Source/WebCore/platform/graphics/cairo/PlatformContextCairo.cpp
>@@ -30,41 +30,20 @@
> 
> #if USE(CAIRO)
> 
>-#include "CairoUtilities.h"
>-#include "Gradient.h"
>-#include "GraphicsContext.h"
>-#include "Pattern.h"
> #include <cairo.h>
> 
> namespace WebCore {
> 
>-// In Cairo image masking is immediate, so to emulate image clipping we must save masking
>-// details as part of the context state and apply them during platform restore.
>-class ImageMaskInformation {
>-public:
>-    void update(cairo_surface_t* maskSurface, const FloatRect& maskRect)
>-    {
>-        m_maskSurface = maskSurface;
>-        m_maskRect = maskRect;
>-    }
>-
>-    bool isValid() const { return m_maskSurface; }
>-    cairo_surface_t* maskSurface() const { return m_maskSurface.get(); }
>-    const FloatRect& maskRect() const { return m_maskRect; }
>-
>-private:
>-    RefPtr<cairo_surface_t> m_maskSurface;
>-    FloatRect m_maskRect;
>-};
>-
>-
> // Encapsulates the additional painting state information we store for each
> // pushed graphics state.
> class PlatformContextCairo::State {
> public:
>     State() = default;
> 
>-    ImageMaskInformation m_imageMaskInformation;
>+    struct {
>+        RefPtr<cairo_pattern_t> pattern;
>+        cairo_matrix_t matrix;
>+    } m_mask;
> };
> 
> PlatformContextCairo::PlatformContextCairo(cairo_t* cr)
>@@ -76,11 +55,14 @@ PlatformContextCairo::PlatformContextCairo(cairo_t* cr)
> 
> void PlatformContextCairo::restore()
> {
>-    const ImageMaskInformation& maskInformation = m_state->m_imageMaskInformation;
>-    if (maskInformation.isValid()) {
>-        const FloatRect& maskRect = maskInformation.maskRect();
>+    if (m_state->m_mask.pattern) {
>         cairo_pop_group_to_source(m_cr.get());
>-        cairo_mask_surface(m_cr.get(), maskInformation.maskSurface(), maskRect.x(), maskRect.y());
>+
>+        cairo_matrix_t matrix;
>+        cairo_get_matrix(m_cr.get(), &matrix);
>+        cairo_set_matrix(m_cr.get(), &m_state->m_mask.matrix);
>+        cairo_mask(m_cr.get(), m_state->m_mask.pattern.get());
>+        cairo_set_matrix(m_cr.get(), &matrix);
>     }
> 
>     m_stateStack.removeLast();
>@@ -105,29 +87,14 @@ void PlatformContextCairo::pushImageMask(cairo_surface_t* surface, const FloatRe
>     // We must call savePlatformState at least once before we can use image masking,
>     // since we actually apply the mask in restorePlatformState.
>     ASSERT(!m_stateStack.isEmpty());
>-    m_state->m_imageMaskInformation.update(surface, rect);
>-
>-    // Cairo doesn't support the notion of an image clip, so we push a group here
>-    // and then paint it to the surface with an image mask (which is an immediate
>-    // operation) during restorePlatformState.
>+    m_state->m_mask.pattern = adoptRef(cairo_pattern_create_for_surface(surface));
>+    cairo_get_matrix(m_cr.get(), &m_state->m_mask.matrix);
> 
>-    // We want to allow the clipped elements to composite with the surface as it
>-    // is now, but they are isolated in another group. To make this work, we're
>-    // going to blit the current surface contents onto the new group once we push it.
>-    cairo_surface_t* currentTarget = cairo_get_target(m_cr.get());
>-    cairo_surface_flush(currentTarget);
>+    cairo_matrix_t matrix;
>+    cairo_matrix_init_translate(&matrix, -rect.x(), -rect.y());
>+    cairo_pattern_set_matrix(m_state->m_mask.pattern.get(), &matrix);
> 
>-    // Pushing a new group ensures that only things painted after this point are clipped.
>     cairo_push_group(m_cr.get());
>-    cairo_set_operator(m_cr.get(), CAIRO_OPERATOR_SOURCE);
>-
>-    // To avoid the limit of Pixman backend, we need to reduce the size of pattern matrix
>-    // See https://bugs.webkit.org/show_bug.cgi?id=154283
>-    cairo_set_source_surface(m_cr.get(), currentTarget, rect.x(), rect.y());
>-    cairo_translate(m_cr.get(), rect.x(), rect.y());
>-    cairo_rectangle(m_cr.get(), 0, 0, rect.width(), rect.height());
>-    cairo_fill(m_cr.get());
>-    cairo_translate(m_cr.get(), -rect.x(), -rect.y());
> }
> 
> } // namespace WebCore
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index aa617c5893b5f9ba31d23b7f550b796c2073c87e..5006ec5568ad23695cde915b2c356699701386ce 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,43 @@
>+2019-06-12  Carlos Garcia Campos  <cgarcia@igalia.com>
>+
>+        [cairo][SVG] If clipPath has multiple elements, clip-path doesn't work with transform
>+        https://bugs.webkit.org/show_bug.cgi?id=198746
>+        <rdar://problem/51620347>
>+
>+        Reviewed by Don Olmstead.
>+
>+        * svg/clip-path/clip-hidpi-expected.svg: Added.
>+        * svg/clip-path/clip-hidpi.svg: Added.
>+        * svg/clip-path/clip-opacity-translate-expected.svg: Added.
>+        * svg/clip-path/clip-opacity-translate.svg: Added.
>+
>+2019-06-12  Fujii Hironori  <Hironori.Fujii@sony.com>
>+
>+        [GTK] Some reftest fail with only one or two pixel differences in diff image
>+        https://bugs.webkit.org/show_bug.cgi?id=168426
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * platform/gtk/TestExpectations:
>+        * platform/wpe/TestExpectations:
>+        svg/clip-path/clip-opacity.html results in 0.01% image diff. Marked it as ImageOnlyFailure of Bug 168426.
>+
>+2019-06-12  Fujii Hironori  <Hironori.Fujii@sony.com>
>+
>+        [cairo][SVG] Putting multiple path elements in clippath causes rendering artifacts
>+        https://bugs.webkit.org/show_bug.cgi?id=198701
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * platform/gtk/TestExpectations:
>+        * platform/wpe/TestExpectations:
>+        Unskipped svg/gradients/spreadMethodDiagonal3.svg and svg/gradients/spreadMethodDiagonal4.svg.
>+
>+        * svg/clip-path/clip-opacity-expected.html: Added.
>+        * svg/clip-path/clip-opacity.html: Added.
>+        * svg/clip-path/svg-in-html-expected.html: Added.
>+        * svg/clip-path/svg-in-html.html: Added.
>+
> 2019-06-04  Youenn Fablet  <youenn@apple.com>
> 
>         Layout test landed flaky in 245873 [ Release ] http/wpt/service-workers/service-worker-networkprocess-crash.html is a flaky failure
>diff --git a/LayoutTests/platform/gtk/TestExpectations b/LayoutTests/platform/gtk/TestExpectations
>index abb0469bbad62a9259760d8524daf943c82bb367..126116b182bf68c7fefa63c3797a5605b7c68c65 100644
>--- a/LayoutTests/platform/gtk/TestExpectations
>+++ b/LayoutTests/platform/gtk/TestExpectations
>@@ -3338,6 +3338,7 @@ webkit.org/b/168373 media/media-preload-no-delay-loadevent.html [ Failure ]
> webkit.org/b/168426 fast/multicol/columns-on-body.html [ ImageOnlyFailure ]
> webkit.org/b/168426 legacy-animation-engine/imported/blink/animations/display-inline-style-adjust.html [ ImageOnlyFailure ]
> webkit.org/b/168426 fast/html/details-comment-crash.html [ ImageOnlyFailure ]
>+webkit.org/b/168426 svg/clip-path/clip-opacity.html [ ImageOnlyFailure ]
> 
> webkit.org/b/136109 fast/multicol/mixed-opacity-fixed-test.html [ ImageOnlyFailure ]
> 
>@@ -3631,8 +3632,6 @@ webkit.org/b/189737 editing/pasteboard/4930986-2-paste-as-quotation.html [ Failu
> webkit.org/b/189737 editing/pasteboard/4930986-3-paste-as-quotation.html [ Failure ]
> 
> webkit.org/b/189739 svg/gradients/spreadMethodClose2.svg [ ImageOnlyFailure ]
>-webkit.org/b/189739 svg/gradients/spreadMethodDiagonal3.svg [ ImageOnlyFailure ]
>-webkit.org/b/189739 svg/gradients/spreadMethodDiagonal4.svg [ ImageOnlyFailure ]
> 
> webkit.org/b/189994 fast/files/xhr-response-blob.html [ Failure ]
> 
>diff --git a/LayoutTests/platform/wpe/TestExpectations b/LayoutTests/platform/wpe/TestExpectations
>index db1e3f0008ae955c37db606b4bf5bb280ee4a1bd..d597daf4d5817fb1cb2b86e27008bc23cb360ec4 100644
>--- a/LayoutTests/platform/wpe/TestExpectations
>+++ b/LayoutTests/platform/wpe/TestExpectations
>@@ -1306,8 +1306,6 @@ webkit.org/b/160137 svg/custom/non-scaling-stroke.svg [ Failure Pass ]
> webkit.org/b/160137 svg/custom/non-scaling-stroke-update.svg [ ImageOnlyFailure Pass ]
> webkit.org/b/112228 svg/custom/resources-css-scaled.html [ ImageOnlyFailure ]
> webkit.org/b/189739 svg/gradients/spreadMethodClose2.svg [ ImageOnlyFailure ]
>-webkit.org/b/189739 svg/gradients/spreadMethodDiagonal3.svg [ ImageOnlyFailure ]
>-webkit.org/b/189739 svg/gradients/spreadMethodDiagonal4.svg [ ImageOnlyFailure ]
> webkit.org/b/115440 svg/stroke/animated-non-scaling-stroke.html [ ImageOnlyFailure Pass ]
> webkit.org/b/88230 svg/stroke/non-scaling-stroke-pattern.svg [ ImageOnlyFailure Pass ]
> webkit.org/b/137096 svg/text/alt-glyph-for-surrogate-pair.svg [ ImageOnlyFailure ]
>@@ -1460,6 +1458,7 @@ webkit.org/b/169910 fast/multicol/simple-line-layout-line-index-after-strut.html
> webkit.org/b/160249 fast/shrink-wrap/rect-shrink-wrap.html [ ImageOnlyFailure ]
> 
> webkit.org/b/168426 fast/html/details-comment-crash.html [ ImageOnlyFailure ]
>+webkit.org/b/168426 svg/clip-path/clip-opacity.html [ ImageOnlyFailure ]
> 
> webkit.org/b/188966 fast/images/image-map-outline-in-positioned-container.html [ ImageOnlyFailure ]
> webkit.org/b/188966 fast/images/image-map-outline-with-paint-root-offset.html [ ImageOnlyFailure ]
>diff --git a/LayoutTests/svg/clip-path/clip-hidpi-expected.svg b/LayoutTests/svg/clip-path/clip-hidpi-expected.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..d9eb369e94e4a586b724dedcce6cf8d71b26d88c
>--- /dev/null
>+++ b/LayoutTests/svg/clip-path/clip-hidpi-expected.svg
>@@ -0,0 +1,18 @@
>+<svg xmlns="http://www.w3.org/2000/svg">
>+
>+<defs>
>+<clipPath id="clip">
>+    <rect width="200" height="50"/>
>+    <rect width="200" height="50"/>
>+</clipPath>
>+</defs>
>+<foreignObject width="200" height="100" clip-path="url(#clip)" opacity=".5">
>+    <html xmlns="http://www.w3.org/1999/xhtml">
>+    <body>
>+        <div style="background: green; height: 50px;"></div>
>+        <div style="background: red; height: 50px;"></div>
>+    </body>
>+    </html>
>+</foreignObject>
>+</svg>
>+
>diff --git a/LayoutTests/svg/clip-path/clip-hidpi.svg b/LayoutTests/svg/clip-path/clip-hidpi.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..4b525153f82cb5f028203e58e803101ad37011a5
>--- /dev/null
>+++ b/LayoutTests/svg/clip-path/clip-hidpi.svg
>@@ -0,0 +1,22 @@
>+<svg xmlns="http://www.w3.org/2000/svg">
>+
>+<defs>
>+<clipPath id="clip">
>+    <rect width="200" height="50"/>
>+    <rect width="200" height="50"/>
>+</clipPath>
>+</defs>
>+<foreignObject width="200" height="100" clip-path="url(#clip)" opacity=".5">
>+    <html xmlns="http://www.w3.org/1999/xhtml">
>+    <body>
>+        <div style="background: green; height: 50px;"></div>
>+        <div style="background: red; height: 50px;"></div>
>+    </body>
>+    </html>
>+</foreignObject>
>+<script>
>+  testRunner.setBackingScaleFactor(2, () -> { testRunner.notifyDone() });
>+  testRunner.waitUntilDone();
>+</script>
>+</svg>
>+
>diff --git a/LayoutTests/svg/clip-path/clip-opacity-expected.html b/LayoutTests/svg/clip-path/clip-opacity-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..714e8aa69474c32c7df707ff1fec4fc1a11e1dfb
>--- /dev/null
>+++ b/LayoutTests/svg/clip-path/clip-opacity-expected.html
>@@ -0,0 +1,23 @@
>+<!DOCTYPE html>
>+<html>
>+<body>
>+<svg xmlns="http://www.w3.org/2000/svg" width="350">
>+<g>
>+  <circle cx="50" cy="50" r="50" fill="green"/>
>+  <circle cx="100" cy="50" r="50" fill="red" />
>+  <g>
>+    <circle cx="50" cy="100" r="50" fill="green" opacity=".5" />
>+    <circle cx="100" cy="100" r="50" fill="red"  opacity=".5" />
>+  </g>
>+</g>
>+<g transform="translate(200,0)">
>+  <circle cx="50" cy="50" r="50" fill="green"/>
>+  <circle cx="100" cy="50" r="50" fill="red" />
>+  <g>
>+    <circle cx="50" cy="100" r="50" fill="green" opacity=".5" />
>+    <circle cx="100" cy="100" r="50" fill="red"  opacity=".5" />
>+  </g>
>+</g>
>+</svg>
>+</body>
>+</html>
>diff --git a/LayoutTests/svg/clip-path/clip-opacity-translate-expected.svg b/LayoutTests/svg/clip-path/clip-opacity-translate-expected.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..9828b5963d9cbea510ef343692785304ebc8f180
>--- /dev/null
>+++ b/LayoutTests/svg/clip-path/clip-opacity-translate-expected.svg
>@@ -0,0 +1,18 @@
>+<svg xmlns="http://www.w3.org/2000/svg" width="350">
>+<g>
>+  <circle cx="50" cy="50" r="50" fill="green"/>
>+  <circle cx="100" cy="50" r="50" fill="red" />
>+  <g opacity=".5">
>+    <circle cx="50" cy="100" r="50" fill="green"/>
>+    <circle cx="100" cy="100" r="50" fill="red" />
>+  </g>
>+</g>
>+<g transform="translate(200,0)">
>+  <circle cx="50" cy="50" r="50" fill="green"/>
>+  <circle cx="100" cy="50" r="50" fill="red" />
>+  <g opacity=".5">
>+    <circle cx="50" cy="100" r="50" fill="green"/>
>+    <circle cx="100" cy="100" r="50" fill="red" />
>+  </g>
>+</g>
>+</svg>
>diff --git a/LayoutTests/svg/clip-path/clip-opacity-translate.svg b/LayoutTests/svg/clip-path/clip-opacity-translate.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..eab0307fad438778f436e9a34c9d5d1c5d0ec22b
>--- /dev/null
>+++ b/LayoutTests/svg/clip-path/clip-opacity-translate.svg
>@@ -0,0 +1,27 @@
>+<svg xmlns="http://www.w3.org/2000/svg" width="350">
>+<defs>
>+<clipPath id="clip1">
>+    <rect width="200" height="200"/>
>+</clipPath>
>+<clipPath id="clip2">
>+    <rect width="200" height="200"/>
>+    <rect width="200" height="200"/>
>+</clipPath>
>+</defs>
>+<g>
>+  <circle cx="50" cy="50" r="50" fill="green"/>
>+  <circle cx="100" cy="50" r="50" fill="red" />
>+  <g clip-path="url(#clip1)" opacity=".5">
>+    <circle cx="50" cy="100" r="50" fill="green"/>
>+    <circle cx="100" cy="100" r="50" fill="red" />
>+  </g>
>+</g>
>+<g transform="translate(200,0)">
>+  <circle cx="50" cy="50" r="50" fill="green"/>
>+  <circle cx="100" cy="50" r="50" fill="red" />
>+  <g clip-path="url(#clip2)" opacity=".5">
>+    <circle cx="50" cy="100" r="50" fill="green"/>
>+    <circle cx="100" cy="100" r="50" fill="red" />
>+  </g>
>+</g>
>+</svg>
>diff --git a/LayoutTests/svg/clip-path/clip-opacity.html b/LayoutTests/svg/clip-path/clip-opacity.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..6f860fd1f45882debc8ec94b58d17b2e0128f1cd
>--- /dev/null
>+++ b/LayoutTests/svg/clip-path/clip-opacity.html
>@@ -0,0 +1,32 @@
>+<!DOCTYPE html>
>+<html>
>+<body>
>+<svg xmlns="http://www.w3.org/2000/svg" width="350">
>+<defs>
>+<clipPath id="clip1">
>+    <rect width="200" height="200"/>
>+</clipPath>
>+<clipPath id="clip2">
>+    <rect width="200" height="200"/>
>+    <rect width="200" height="200"/>
>+</clipPath>
>+</defs>
>+<g>
>+  <circle cx="50" cy="50" r="50" fill="green"/>
>+  <circle cx="100" cy="50" r="50" fill="red" />
>+  <g clip-path="url(#clip1)">
>+    <circle cx="50" cy="100" r="50" fill="green" opacity=".5" />
>+    <circle cx="100" cy="100" r="50" fill="red"  opacity=".5" />
>+  </g>
>+</g>
>+<g transform="translate(200,0)">
>+  <circle cx="50" cy="50" r="50" fill="green"/>
>+  <circle cx="100" cy="50" r="50" fill="red" />
>+  <g clip-path="url(#clip2)">
>+    <circle cx="50" cy="100" r="50" fill="green" opacity=".5" />
>+    <circle cx="100" cy="100" r="50" fill="red"  opacity=".5" />
>+  </g>
>+</g>
>+</svg>
>+</body>
>+</html>
>diff --git a/LayoutTests/svg/clip-path/svg-in-html-expected.html b/LayoutTests/svg/clip-path/svg-in-html-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..26e990cd63911b31f47c8faa1f8a1e0aec7b4fa6
>--- /dev/null
>+++ b/LayoutTests/svg/clip-path/svg-in-html-expected.html
>@@ -0,0 +1,40 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+<style>
>+body {
>+    border: 2em blue solid;
>+}
>+svg {
>+    background: pink;
>+}
>+</style>
>+</head>
>+<body>
>+<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
>+    <g>
>+        <circle cx="1" cy="1" r="1" fill="green"></circle>
>+        <circle cx="7" cy="1" r="1" fill="green"></circle>
>+    </g>
>+</svg>
>+<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
>+    <g>
>+        <circle cx="1" cy="7" r="1" fill="green"></circle>
>+        <circle cx="7" cy="7" r="1" fill="green"></circle>
>+    </g>
>+</svg>
>+<br>
>+<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
>+    <g>
>+        <circle cx="1" cy="1" r="1" fill="green"></circle>
>+        <circle cx="7" cy="1" r="1" fill="green"></circle>
>+    </g>
>+</svg>
>+<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
>+    <g>
>+        <circle cx="1" cy="7" r="1" fill="green"></circle>
>+        <circle cx="7" cy="7" r="1" fill="green"></circle>
>+    </g>
>+</svg>
>+</body>
>+</html>
>diff --git a/LayoutTests/svg/clip-path/svg-in-html.html b/LayoutTests/svg/clip-path/svg-in-html.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..d689b448f99ce4c0ebf2b0ec63dc4a2710cd2b40
>--- /dev/null
>+++ b/LayoutTests/svg/clip-path/svg-in-html.html
>@@ -0,0 +1,62 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+<style>
>+body {
>+    border: 2em blue solid;
>+}
>+svg {
>+    background: pink;
>+}
>+</style>
>+</head>
>+<body>
>+<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
>+    <clippath id="clip1">
>+        <rect width="8" height="4"></rect>
>+    </clippath>
>+    <g clip-path="url(#clip1)">
>+        <circle cx="1" cy="1" r="1" fill="green"></circle>
>+        <circle cx="7" cy="1" r="1" fill="green"></circle>
>+        <circle cx="1" cy="7" r="1" fill="green"></circle>
>+        <circle cx="7" cy="7" r="1" fill="green"></circle>
>+    </g>
>+</svg>
>+<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
>+    <clippath id="clip2">
>+        <rect y="4" width="8" height="4"></rect>
>+    </clippath>
>+    <g clip-path="url(#clip2)">
>+        <circle cx="1" cy="1" r="1" fill="green"></circle>
>+        <circle cx="7" cy="1" r="1" fill="green"></circle>
>+        <circle cx="1" cy="7" r="1" fill="green"></circle>
>+        <circle cx="7" cy="7" r="1" fill="green"></circle>
>+    </g>
>+</svg>
>+<br>
>+<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
>+    <clippath id="clip3">
>+        <rect width="8" height="2"></rect>
>+        <rect y="4" width="8" height="2"></rect>
>+    </clippath>
>+    <g clip-path="url(#clip3)">
>+        <circle cx="1" cy="1" r="1" fill="green"></circle>
>+        <circle cx="7" cy="1" r="1" fill="green"></circle>
>+        <circle cx="1" cy="7" r="1" fill="green"></circle>
>+        <circle cx="7" cy="7" r="1" fill="green"></circle>
>+    </g>
>+</svg>
>+<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
>+    <clippath id="clip4">
>+        <rect y="2" width="8" height="2"></rect>
>+        <rect y="6" width="8" height="2"></rect>
>+    </clippath>
>+    <g clip-path="url(#clip4)">
>+        <circle cx="1" cy="1" r="1" fill="green"></circle>
>+        <circle cx="7" cy="1" r="1" fill="green"></circle>
>+        <circle cx="1" cy="7" r="1" fill="green"></circle>
>+        <circle cx="7" cy="7" r="1" fill="green"></circle>
>+    </g>
>+</svg>
>+</body>
>+</html>

Flags:

Hironori.Fujii: commit-queue-

Actions: View | Formatted Diff | Diff

Attachments on bug 198746: 371826 | 371938 | 371942 | 371944 | 371946 | 372014 | 372015