[DevTools] Adjust svg elements highlight to the root FrameView origin.

LayoutTests/inspector/elements/highlight-css-shapes-outside-scroll-expected.txt

Index: LayoutTests/inspector/elements/highlight-css-shapes-outside-scroll-expected.txt
diff --git a/LayoutTests/inspector/elements/highlight-css-shapes-outside-scroll-expected.txt b/LayoutTests/inspector/elements/highlight-css-shapes-outside-scroll-expected.txt
index b591bf5ffd92328a4198bee659542815c35b1d1e..fb1284a110cab388936e8a8f8460835803ed9f3f 100644
--- a/LayoutTests/inspector/elements/highlight-css-shapes-outside-scroll-expected.txt
+++ b/LayoutTests/inspector/elements/highlight-css-shapes-outside-scroll-expected.txt
@@ -1,3 +1,65 @@
-["M",88,8,"L",88,8,"C",132,8,168,44,168,88,"L",168,88,"C",168,132,132,168,88,168,"L",88,168,"C",44,168,8,132,8,88,"L",8,88,"C",8,44,44,8,88,8,"Z"]
-["M",88,8,"L",88,8,"C",132,8,168,44,168,88,"L",168,88,"C",168,132,132,168,88,168,"L",88,168,"C",44,168,8,132,8,88,"L",8,88,"C",8,44,44,8,88,8,"Z"]
+circle: {
+  "paths": [
+    {
+      "path": ["M", 88, 8, "L", 88, 8, "C", 132, 8, 168, 44, 168, 88, "L", 168, 88, "C", 168, 132, 132, 168, 88, 168, "L", 88, 168, "C", 44, 168, 8, 132, 8, 88, "L", 8, 88, "C", 8, 44, 44, 8, 88, 8, "Z"],
+      "fillColor": "rgba(0, 0, 0, 0)"
+    },
+    {
+      "path": ["M", 88, -24, "L", 88, -24, "C", 150, -24, 200, 26, 200, 88, "L", 200, 88, "C", 200, 150, 150, 200, 88, 200, "L", 88, 200, "C", 26, 200, -24, 150, -24, 88, "L", -24, 88, "C", -24, 26, 26, -24, 88, -24, "Z"],
+      "fillColor": "rgba(128, 128, 128, 0)"
+    },
+    {
+      "path": ["M", 24, 24, "L", 152, 24, "L", 152, 152, "L", 24, 152, "Z"],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)"
+    },
+    {
+      "path": ["M", 24, 24, "L", 152, 24, "L", 152, 152, "L", 24, 152, "Z"],
+      "fillColor": "rgba(0, 255, 0, 0)"
+    },
+    {
+      "path": ["M", 24, 24, "L", 152, 24, "L", 152, 152, "L", 24, 152, "Z"],
+      "fillColor": "rgba(0, 0, 255, 0)"
+    },
+    {
+      "path": ["M", 8, 8, "L", 168, 8, "L", 168, 168, "L", 8, 168, "Z"],
+      "fillColor": "rgba(255, 255, 255, 0)"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true
+}
+
+circle: {
+  "paths": [
+    {
+      "path": ["M", 88, 8, "L", 88, 8, "C", 132, 8, 168, 44, 168, 88, "L", 168, 88, "C", 168, 132, 132, 168, 88, 168, "L", 88, 168, "C", 44, 168, 8, 132, 8, 88, "L", 8, 88, "C", 8, 44, 44, 8, 88, 8, "Z"],
+      "fillColor": "rgba(0, 0, 0, 0)"
+    },
+    {
+      "path": ["M", 88, -24, "L", 88, -24, "C", 150, -24, 200, 26, 200, 88, "L", 200, 88, "C", 200, 150, 150, 200, 88, 200, "L", 88, 200, "C", 26, 200, -24, 150, -24, 88, "L", -24, 88, "C", -24, 26, 26, -24, 88, -24, "Z"],
+      "fillColor": "rgba(128, 128, 128, 0)"
+    },
+    {
+      "path": ["M", 24, 24, "L", 152, 24, "L", 152, 152, "L", 24, 152, "Z"],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)"
+    },
+    {
+      "path": ["M", 24, 24, "L", 152, 24, "L", 152, 152, "L", 24, 152, "Z"],
+      "fillColor": "rgba(0, 255, 0, 0)"
+    },
+    {
+      "path": ["M", 24, 24, "L", 152, 24, "L", 152, 152, "L", 24, 152, "Z"],
+      "fillColor": "rgba(0, 0, 255, 0)"
+    },
+    {
+      "path": ["M", 8, 8, "L", 168, 8, "L", 168, 168, "L", 8, 168, "Z"],
+      "fillColor": "rgba(255, 255, 255, 0)"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true
+}
+