Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / svg / custom / js-late-pattern-and-object-creation.svg
blob7b1e447ce881078680f1a18974b6a49a578be596
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
3 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" onload="runRepaintAndPixelTest()">
4 <script xlink:href="../../resources/run-after-layout-and-paint.js"/>
5 <script xlink:href="../../fast/repaint/resources/text-based-repaint.js"/>
6 <g id="content"/>
8 <script>
9 window.testIsAsync = true;
10 var content = document.getElementById("content");
12 function repaintTest() {
13 runAfterLayoutAndPaint(createPatterns);
16 function createPatterns()
18 // Setup "fillPattern"
19 var pattern1 = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
20 pattern1.setAttribute("id", "fillPattern");
21 pattern1.setAttribute("patternUnits", "userSpaceOnUse");
22 pattern1.setAttribute("x", "0");
23 pattern1.setAttribute("y", "0");
24 pattern1.setAttribute("width", "20");
25 pattern1.setAttribute("height", "20");
27 var rect11 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
28 rect11.setAttribute("x", "5");
29 rect11.setAttribute("y", "5");
30 rect11.setAttribute("width", "10");
31 rect11.setAttribute("height", "10");
32 rect11.setAttribute("fill", "red");
34 var rect21 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
35 rect21.setAttribute("x", "10");
36 rect21.setAttribute("y", "10");
37 rect21.setAttribute("width", "10");
38 rect21.setAttribute("height", "10");
39 rect21.setAttribute("fill", "green");
41 pattern1.appendChild(rect11);
42 pattern1.appendChild(rect21);
44 content.appendChild(pattern1);
46 // Setup "strokePattern"
47 var pattern2 = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
48 pattern2.setAttribute("id", "strokePattern");
49 pattern2.setAttribute("patternUnits", "userSpaceOnUse");
50 pattern2.setAttribute("x", "0");
51 pattern2.setAttribute("y", "0");
52 pattern2.setAttribute("width", "20");
53 pattern2.setAttribute("height", "20");
55 var rect12 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
56 rect12.setAttribute("x", "5");
57 rect12.setAttribute("y", "5");
58 rect12.setAttribute("width", "10");
59 rect12.setAttribute("height", "10");
60 rect12.setAttribute("fill", "yellow");
62 var rect22 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
63 rect22.setAttribute("x", "10");
64 rect22.setAttribute("y", "10");
65 rect22.setAttribute("width", "10");
66 rect22.setAttribute("height", "10");
67 rect22.setAttribute("fill", "blue");
69 pattern2.appendChild(rect12);
70 pattern2.appendChild(rect22);
72 content.appendChild(pattern2);
74 runAfterLayoutAndPaint(setupPatternUsers);
77 function setupPatternUsers()
79 var text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
80 text1.setAttribute("font-size", "68");
81 text1.setAttribute("x", "-150");
82 text1.setAttribute("y", "70")
83 text1.setAttribute("fill", "url(#fillPattern)");
84 text1.setAttribute("stroke", "none");
85 text1.appendChild(document.createTextNode("Pattern on fill"));
87 content.appendChild(text1);
89 var text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
90 text2.setAttribute("font-size", "68");
91 text2.setAttribute("x", "-150");
92 text2.setAttribute("y", "140")
93 text2.setAttribute("fill", "none");
94 text2.setAttribute("stroke", "url(#strokePattern)");
95 text2.appendChild(document.createTextNode("Pattern on stroke"));
97 content.appendChild(text2);
99 var text3 = document.createElementNS("http://www.w3.org/2000/svg", "text");
100 text3.setAttribute("font-size", "68");
101 text3.setAttribute("x", "-150");
102 text3.setAttribute("y", "210")
103 text3.setAttribute("fill", "url(#fillPattern)");
104 text3.setAttribute("stroke", "url(#strokePattern)");
105 text3.appendChild(document.createTextNode("Pattern on fill/stroke"));
107 content.appendChild(text3);
109 finishRepaintTest();
111 </script>
113 </svg>