-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cherry-pick 275117@main (c443c97). https://bugs.webkit.org/show_bug.c…
…gi?id=269234 Fix custom/pattern-userSpaceOnUse-userToBaseTransform.xhtml https://bugs.webkit.org/show_bug.cgi?id=269234 Reviewed by Nikolas Zimmermann. When determining RenderSVGRoot as root layer we also calculate any padding/border values as part of offsetFromAncestor, this means for patterns painting would be wrongly offset for pattern content. Instead, use the RenderSVGRoot, viewport as root layer which discards any border/padding for the pattern content painting. * LayoutTests/platform/glib/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox-expected.txt: Added. * LayoutTests/platform/ios/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox-expected.txt: Added. * LayoutTests/platform/mac-sonoma-wk2-lbse-text/TestExpectations: * LayoutTests/platform/mac-sonoma-wk2-lbse-text/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox-expected.txt: Added. * LayoutTests/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox-expected.png: Added. * LayoutTests/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox-expected.txt: Added. * LayoutTests/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox.xhtml: Added. * Source/WebCore/rendering/RenderLayer.cpp: (WebCore::RenderLayer::paintSVGResourceLayer): (WebCore::RenderLayer::enclosingSVGRootLayer const): Deleted. * Source/WebCore/rendering/RenderLayer.h: Canonical link: https://commits.webkit.org/275117@main Canonical link: https://commits.webkit.org/274313.174@webkitglib/2.44
- Loading branch information
Showing
9 changed files
with
242 additions
and
12 deletions.
There are no files selected for viewing
42 changes: 42 additions & 0 deletions
42
...form/glib/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
layer at (0,0) size 800x600 | ||
RenderView at (0,0) size 800x600 | ||
layer at (0,0) size 800x458 | ||
RenderBlock {html} at (0,0) size 800x458 | ||
RenderBody {body} at (8,8) size 784x442 | ||
RenderText {#text} at (0,0) size 762x17 | ||
text run at (0,0) width 762: "There should be no red displayed on the screen, and the patterns should not change when the browser window is resized." | ||
RenderBR {br} at (762,0) size 0x17 | ||
RenderBR {br} at (0,18) size 0x17 | ||
RenderSVGRoot {svg} at (8,144) size 202x302 | ||
RenderSVGContainer {g} at (8,144) size 202x302 | ||
RenderSVGRect {rect} at (8,144) size 202x302 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=100.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (8,144) size 202x302 [fill={[type=SOLID] [color=#FF0000]}] [x=100.00] [y=0.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (8,144) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=100.00] [width=100.00] [height=100.00] | ||
RenderSVGRect {rect} at (8,144) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=100.00] [y=0.00] [width=100.00] [height=100.00] | ||
RenderText {#text} at (202,424) size 4x17 | ||
text run at (202,424) width 4: " " | ||
RenderSVGRoot {svg} at (214,44) size 302x402 | ||
RenderSVGText {text} at (5,265) size 82x19 contains 1 chunk(s) | ||
RenderSVGInlineText {#text} at (0,0) size 82x18 | ||
chunk 1 text run 1 at (5.00,280.00) startOffset 0 endOffset 11 width 81.94: "+Transforms" | ||
RenderSVGContainer {g} at (214,44) size 302x402 [transform={m=((1.00,0.00)(0.00,1.00)) t=(0.00,100.00)}] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=0.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=0.00] [width=100.00] [height=100.00] | ||
RenderSVGContainer {g} at (214,44) size 302x402 [transform={m=((1.00,0.00)(0.00,1.00)) t=(100.00,0.00)}] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=0.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=0.00] [width=100.00] [height=100.00] | ||
RenderSVGHiddenContainer {defs} at (0,0) size 0x0 | ||
RenderSVGResourcePattern {pattern} [id="pattern"] [patternUnits=userSpaceOnUse] [patternContentUnits=userSpaceOnUse] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=SOLID] [color=#008000]}] [x=0.00] [y=0.00] [width=100.00] [height=25.00] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=SOLID] [color=#0000FF]}] [x=0.00] [y=25.00] [width=100.00] [height=25.00] | ||
RenderText {#text} at (508,424) size 4x17 | ||
text run at (508,424) width 4: " " | ||
RenderText {#text} at (0,0) size 0x0 | ||
layer at (520,144) size 202x302 | ||
RenderSVGRoot {svg} at (520,144) size 202x302 | ||
RenderSVGText {text} at (5,265) size 169x19 contains 1 chunk(s) | ||
RenderSVGInlineText {#text} at (0,0) size 169x18 | ||
chunk 1 text run 1 at (5.00,280.00) startOffset 0 endOffset 24 width 169.00: "+Accelerated Compositing" | ||
RenderSVGContainer {g} at (520,144) size 202x302 | ||
RenderSVGRect {rect} at (520,144) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=100.00] [width=100.00] [height=100.00] | ||
RenderSVGRect {rect} at (520,144) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=100.00] [y=0.00] [width=100.00] [height=100.00] |
42 changes: 42 additions & 0 deletions
42
...tform/ios/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
layer at (0,0) size 800x600 | ||
RenderView at (0,0) size 800x600 | ||
layer at (0,0) size 800x463 | ||
RenderBlock {html} at (0,0) size 800x463 | ||
RenderBody {body} at (8,8) size 784x447 | ||
RenderText {#text} at (0,0) size 773x19 | ||
text run at (0,0) width 773: "There should be no red displayed on the screen, and the patterns should not change when the browser window is resized." | ||
RenderBR {br} at (772,0) size 1x19 | ||
RenderBR {br} at (0,20) size 0x19 | ||
RenderSVGRoot {svg} at (8,148) size 202x302 | ||
RenderSVGContainer {g} at (8,148) size 202x302 | ||
RenderSVGRect {rect} at (8,148) size 202x302 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=100.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (8,148) size 202x302 [fill={[type=SOLID] [color=#FF0000]}] [x=100.00] [y=0.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (8,148) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=100.00] [width=100.00] [height=100.00] | ||
RenderSVGRect {rect} at (8,148) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=100.00] [y=0.00] [width=100.00] [height=100.00] | ||
RenderText {#text} at (202,427) size 4x19 | ||
text run at (202,427) width 4: " " | ||
RenderSVGRoot {svg} at (214,48) size 302x402 | ||
RenderSVGText {text} at (5,265) size 83x19 contains 1 chunk(s) | ||
RenderSVGInlineText {#text} at (0,0) size 83x19 | ||
chunk 1 text run 1 at (5.00,280.00) startOffset 0 endOffset 11 width 82.78: "+Transforms" | ||
RenderSVGContainer {g} at (214,48) size 302x402 [transform={m=((1.00,0.00)(0.00,1.00)) t=(0.00,100.00)}] | ||
RenderSVGRect {rect} at (214,48) size 302x402 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=0.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (214,48) size 302x402 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=0.00] [width=100.00] [height=100.00] | ||
RenderSVGContainer {g} at (214,48) size 302x402 [transform={m=((1.00,0.00)(0.00,1.00)) t=(100.00,0.00)}] | ||
RenderSVGRect {rect} at (214,48) size 302x402 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=0.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (214,48) size 302x402 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=0.00] [width=100.00] [height=100.00] | ||
RenderSVGHiddenContainer {defs} at (0,0) size 0x0 | ||
RenderSVGResourcePattern {pattern} [id="pattern"] [patternUnits=userSpaceOnUse] [patternContentUnits=userSpaceOnUse] | ||
RenderSVGRect {rect} at (214,48) size 302x402 [fill={[type=SOLID] [color=#008000]}] [x=0.00] [y=0.00] [width=100.00] [height=25.00] | ||
RenderSVGRect {rect} at (214,48) size 302x402 [fill={[type=SOLID] [color=#0000FF]}] [x=0.00] [y=25.00] [width=100.00] [height=25.00] | ||
RenderText {#text} at (508,427) size 4x19 | ||
text run at (508,427) width 4: " " | ||
RenderText {#text} at (0,0) size 0x0 | ||
layer at (520,148) size 202x302 | ||
RenderSVGRoot {svg} at (520,148) size 202x302 | ||
RenderSVGText {text} at (5,265) size 173x19 contains 1 chunk(s) | ||
RenderSVGInlineText {#text} at (0,0) size 173x18 | ||
chunk 1 text run 1 at (5.00,280.00) startOffset 0 endOffset 24 width 172.09: "+Accelerated Compositing" | ||
RenderSVGContainer {g} at (520,148) size 202x302 | ||
RenderSVGRect {rect} at (520,148) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=100.00] [width=100.00] [height=100.00] | ||
RenderSVGRect {rect} at (520,148) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=100.00] [y=0.00] [width=100.00] [height=100.00] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 68 additions & 0 deletions
68
...lbse-text/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
layer at (0,0) size 800x600 | ||
RenderView at (0,0) size 800x600 | ||
layer at (0,0) size 800x458 | ||
RenderBlock {html} at (0,0) size 800x458 | ||
RenderBody {body} at (8,8) size 784x442 | ||
RenderText {#text} at (0,0) size 773x18 | ||
text run at (0,0) width 773: "There should be no red displayed on the screen, and the patterns should not change when the browser window is resized." | ||
RenderBR {br} at (772,0) size 1x18 | ||
RenderBR {br} at (0,18) size 0x18 | ||
RenderText {#text} at (202,424) size 4x18 | ||
text run at (202,424) width 4: " " | ||
RenderText {#text} at (508,424) size 4x18 | ||
text run at (508,424) width 4: " " | ||
RenderText {#text} at (0,0) size 0x0 | ||
layer at (8,144) size 202x302 clip at (9,145) size 200x300 | ||
RenderSVGRoot {svg} at (0,136) size 202x302 [border: (1px solid #000000)] | ||
layer at (9,145) size 200x300 | ||
RenderSVGViewportContainer at (1,1) size 200x300 | ||
layer at (9,145) size 200x200 | ||
RenderSVGTransformableContainer {g} at (0,0) size 200x200 | ||
layer at (9,245) size 100x50 | ||
RenderSVGRect {rect} at (0,100) size 100x50 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=100.00] [width=100.00] [height=50.00] | ||
layer at (109,145) size 100x50 | ||
RenderSVGRect {rect} at (100,0) size 100x50 [fill={[type=SOLID] [color=#FF0000]}] [x=100.00] [y=0.00] [width=100.00] [height=50.00] | ||
layer at (9,245) size 100x100 | ||
RenderSVGRect {rect} at (0,100) size 100x100 [fill={[type=SOLID] [color=#000000]}] [x=0.00] [y=100.00] [width=100.00] [height=100.00] | ||
layer at (109,145) size 100x100 | ||
RenderSVGRect {rect} at (100,0) size 100x100 [fill={[type=SOLID] [color=#000000]}] [x=100.00] [y=0.00] [width=100.00] [height=100.00] | ||
layer at (214,44) size 302x402 clip at (215,45) size 300x400 | ||
RenderSVGRoot {svg} at (206,36) size 302x402 [border: (1px solid #000000)] | ||
layer at (215,45) size 300x400 | ||
RenderSVGViewportContainer at (1,1) size 300x400 | ||
layer at (220,310.75) size 83x18 | ||
RenderSVGText {text} at (5,265) size 83x19 contains 1 chunk(s) | ||
RenderSVGInlineText {#text} at (0,0) size 83x19 | ||
chunk 1 text run 1 at (5.00,280.00) startOffset 0 endOffset 11 width 82.78: "+Transforms" | ||
layer at (215,45) size 100x100 | ||
RenderSVGTransformableContainer {g} at (0,0) size 100x100 | ||
layer at (215,45) size 100x50 | ||
RenderSVGRect {rect} at (0,0) size 100x50 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=0.00] [width=100.00] [height=50.00] | ||
layer at (215,45) size 100x100 | ||
RenderSVGRect {rect} at (0,0) size 100x100 [fill={[type=SOLID] [color=#000000]}] [x=0.00] [y=0.00] [width=100.00] [height=100.00] | ||
layer at (215,45) size 100x100 | ||
RenderSVGTransformableContainer {g} at (0,0) size 100x100 | ||
layer at (215,45) size 100x50 | ||
RenderSVGRect {rect} at (0,0) size 100x50 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=0.00] [width=100.00] [height=50.00] | ||
layer at (215,45) size 100x100 | ||
RenderSVGRect {rect} at (0,0) size 100x100 [fill={[type=SOLID] [color=#000000]}] [x=0.00] [y=0.00] [width=100.00] [height=100.00] | ||
layer at (215,45) size 100x50 | ||
RenderSVGHiddenContainer {pattern} at (0,0) size 100x50 | ||
layer at (215,45) size 100x25 | ||
RenderSVGRect {rect} at (0,0) size 100x25 [fill={[type=SOLID] [color=#008000]}] [x=0.00] [y=0.00] [width=100.00] [height=25.00] | ||
layer at (215,70) size 100x25 | ||
RenderSVGRect {rect} at (0,25) size 100x25 [fill={[type=SOLID] [color=#0000FF]}] [x=0.00] [y=25.00] [width=100.00] [height=25.00] | ||
layer at (520,144) size 202x302 clip at (521,145) size 200x300 | ||
RenderSVGRoot {svg} at (512,136) size 202x302 [border: (1px solid #000000)] | ||
layer at (521,145) size 200x300 | ||
RenderSVGViewportContainer at (1,1) size 200x300 | ||
layer at (526,411) size 172x18 | ||
RenderSVGText {text} at (5,266) size 173x18 contains 1 chunk(s) | ||
RenderSVGInlineText {#text} at (0,0) size 173x18 | ||
chunk 1 text run 1 at (5.00,280.00) startOffset 0 endOffset 24 width 172.09: "+Accelerated Compositing" | ||
layer at (521,145) size 200x200 | ||
RenderSVGTransformableContainer {g} at (0,0) size 200x200 | ||
layer at (521,245) size 100x100 | ||
RenderSVGRect {rect} at (0,100) size 100x100 [fill={[type=SOLID] [color=#000000]}] [x=0.00] [y=100.00] [width=100.00] [height=100.00] | ||
layer at (621,145) size 100x100 | ||
RenderSVGRect {rect} at (100,0) size 100x100 [fill={[type=SOLID] [color=#000000]}] [x=100.00] [y=0.00] [width=100.00] [height=100.00] |
Binary file added
BIN
+24.6 KB
...svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox-expected.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 42 additions & 0 deletions
42
LayoutTests/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
layer at (0,0) size 800x600 | ||
RenderView at (0,0) size 800x600 | ||
layer at (0,0) size 800x458 | ||
RenderBlock {html} at (0,0) size 800x458 | ||
RenderBody {body} at (8,8) size 784x442 | ||
RenderText {#text} at (0,0) size 773x18 | ||
text run at (0,0) width 773: "There should be no red displayed on the screen, and the patterns should not change when the browser window is resized." | ||
RenderBR {br} at (772,0) size 1x18 | ||
RenderBR {br} at (0,18) size 0x18 | ||
RenderSVGRoot {svg} at (8,144) size 202x302 | ||
RenderSVGContainer {g} at (8,144) size 202x302 | ||
RenderSVGRect {rect} at (8,144) size 202x302 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=100.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (8,144) size 202x302 [fill={[type=SOLID] [color=#FF0000]}] [x=100.00] [y=0.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (8,144) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=100.00] [width=100.00] [height=100.00] | ||
RenderSVGRect {rect} at (8,144) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=100.00] [y=0.00] [width=100.00] [height=100.00] | ||
RenderText {#text} at (202,424) size 4x18 | ||
text run at (202,424) width 4: " " | ||
RenderSVGRoot {svg} at (214,44) size 302x402 | ||
RenderSVGText {text} at (5,265) size 83x19 contains 1 chunk(s) | ||
RenderSVGInlineText {#text} at (0,0) size 83x19 | ||
chunk 1 text run 1 at (5.00,280.00) startOffset 0 endOffset 11 width 82.78: "+Transforms" | ||
RenderSVGContainer {g} at (214,44) size 302x402 [transform={m=((1.00,0.00)(0.00,1.00)) t=(0.00,100.00)}] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=0.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=0.00] [width=100.00] [height=100.00] | ||
RenderSVGContainer {g} at (214,44) size 302x402 [transform={m=((1.00,0.00)(0.00,1.00)) t=(100.00,0.00)}] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=SOLID] [color=#FF0000]}] [x=0.00] [y=0.00] [width=100.00] [height=50.00] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=0.00] [width=100.00] [height=100.00] | ||
RenderSVGHiddenContainer {defs} at (0,0) size 0x0 | ||
RenderSVGResourcePattern {pattern} [id="pattern"] [patternUnits=userSpaceOnUse] [patternContentUnits=userSpaceOnUse] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=SOLID] [color=#008000]}] [x=0.00] [y=0.00] [width=100.00] [height=25.00] | ||
RenderSVGRect {rect} at (214,44) size 302x402 [fill={[type=SOLID] [color=#0000FF]}] [x=0.00] [y=25.00] [width=100.00] [height=25.00] | ||
RenderText {#text} at (508,424) size 4x18 | ||
text run at (508,424) width 4: " " | ||
RenderText {#text} at (0,0) size 0x0 | ||
layer at (520,144) size 202x302 | ||
RenderSVGRoot {svg} at (520,144) size 202x302 | ||
RenderSVGText {text} at (5,266) size 173x18 contains 1 chunk(s) | ||
RenderSVGInlineText {#text} at (0,0) size 173x18 | ||
chunk 1 text run 1 at (5.00,280.00) startOffset 0 endOffset 24 width 172.09: "+Accelerated Compositing" | ||
RenderSVGContainer {g} at (520,144) size 202x302 | ||
RenderSVGRect {rect} at (520,144) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=0.00] [y=100.00] [width=100.00] [height=100.00] | ||
RenderSVGRect {rect} at (520,144) size 202x302 [fill={[type=PATTERN] [id="pattern"]}] [x=100.00] [y=0.00] [width=100.00] [height=100.00] |
42 changes: 42 additions & 0 deletions
42
LayoutTests/svg/custom/pattern-userSpaceOnUse-userToBaseTransform-with-viewBox.xhtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"> | ||
<html xmlns="http://www.w3.org/1999/xhtml" > | ||
<head> | ||
<title>userSpaceOnUse SVG Patterns</title> | ||
</head> | ||
<body> | ||
There should be no red displayed on the screen, and the patterns should not change when the browser window is resized.<br/><br/> | ||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg" width="200" height="300" style="border: solid 1px black;"> | ||
<g> | ||
<rect x="0" y="100" width="100" height="50" fill="red"/> | ||
<rect x="100" y="0" width="100" height="50" fill="red"/> | ||
<rect x="0" y="100" width="100" height="100" fill="url(#pattern)"/> | ||
<rect x="100" y="0" width="100" height="100" fill="url(#pattern)"/> | ||
</g> | ||
</svg> | ||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg" width="300" height="400" viewBox="0 0 200 300" style="border: solid 1px black;"> | ||
<text x="5" y="280">+Transforms</text> | ||
<g transform="translate(0, 100)"> | ||
<rect width="100" height="50" fill="red"/> | ||
<rect width="100" height="100" fill="url(#pattern)"/> | ||
|
||
</g> | ||
<g transform="translate(100, 0)"> | ||
<rect width="100" height="50" fill="red"/> | ||
<rect width="100" height="100" fill="url(#pattern)"/> | ||
</g> | ||
<defs> | ||
<pattern id="pattern" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> | ||
<rect width="100" height="25" preserveAspectRatio="none" fill="green"/> | ||
<rect width="100" y="25" height="25" preserveAspectRatio="none" fill="blue"/> | ||
</pattern> | ||
</defs> | ||
</svg> | ||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg" width="200" height="300" style="border: solid 1px black; -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); -o-transform: translateZ(0px);"> | ||
<text x="5" y="280">+Accelerated Compositing</text> | ||
<g> | ||
<rect x="0" y="100" width="100" height="100" fill="url(#pattern)"/> | ||
<rect x="100" y="0" width="100" height="100" fill="url(#pattern)"/> | ||
</g> | ||
</svg> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters