2011-04-09 Dimitri Glazkov <dglazkov@chromium.org>

        Reviewed by James Robinson.

        Add a diagram, explaning how  an event's relatedTarget interact with shadow DOM boundaries.
        https://bugs.webkit.org/show_bug.cgi?id=58190

        * misc/related-target-and-shadow-dom.svg: Added.

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

diff --git a/Websites/webkit.org/ChangeLog b/Websites/webkit.org/ChangeLog
index aebd25ce40d78147c9f439658db73607e6a62933..d45102b3447febe8d026d9b003eef2d390190de2 100644 (file)
--- a/Websites/webkit.org/ChangeLog
+++ b/Websites/webkit.org/ChangeLog
@@ -1,3 +1,12 @@
+2011-04-09  Dimitri Glazkov  <dglazkov@chromium.org>
+
+        Reviewed by James Robinson.
+
+        Add a diagram, explaning how  an event's relatedTarget interact with shadow DOM boundaries.
+        https://bugs.webkit.org/show_bug.cgi?id=58190
+
+        * misc/related-target-and-shadow-dom.svg: Added.
+
 2011-04-06  David Levin  <levin@chromium.org>
 
         Reviewed by Ojan Vafai.

diff --git a/Websites/webkit.org/misc/related-target-and-shadow-dom.svg b/Websites/webkit.org/misc/related-target-and-shadow-dom.svg
new file mode 100644 (file)
index 0000000..1f84c49
--- /dev/null
+++ b/Websites/webkit.org/misc/related-target-and-shadow-dom.svg
@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
+    <!-- See http://webkit.org/b/55515 for explanation that goes with this giagram -->
+    <defs>
+        <symbol id="chain">
+            <line x1="5" y1="5" x2="5" y2="140" stroke="darkgray" />
+            <circle cx="5" cy="20" r="3" fill="white" stroke="darkgray" />
+            <circle cx="5" cy="35" r="3" fill="white" stroke="darkgray" />
+            <circle cx="5" cy="50" r="3" fill="white" stroke="darkgray" />
+            <circle cx="5" cy="65" r="3" fill="white" stroke="darkgray" />
+            <circle cx="5" cy="80" r="3" fill="white" stroke="darkgray" />
+            <circle cx="5" cy="95" r="3" fill="white" stroke="darkgray" />
+            <circle cx="5" cy="110" r="3" fill="white" stroke="darkgray" />
+            <circle cx="5" cy="125" r="3" fill="white" stroke="darkgray" />
+            <circle cx="5" cy="140" r="4" fill="white" stroke="black" />
+        </symbol>
+    </defs>
+    <g id="shadow-boundary-1">
+        <line x1="140" x2="160" y1="230" y2="230" stroke="lightgray" />
+        <text x="163" y="227" font-family="Helvetica" font-size="8" fill="lightgray">shadow boundary</text> 
+    </g>
+    <use x="145" y="150" xlink:href="#chain" />
+    <text x="157" y="153" font-family="Helvetica" font-size="8">lowest common ancestor</text>
+    <text x="157" y="296" font-family="Helvetica" font-size="8">target</text>
+    <g id="related-target" transform="rotate(45, 150, 155)">
+        <g id="shadow-boundary-2">
+            <line x1="140" x2="160" y1="230" y2="230" stroke="lightgray" />
+            <text x="20" y="200" transform="rotate(-45, 145, 150)" font-family="Helvetica" font-size="8" fill="lightgray">shadow boundary</text> 
+        </g>
+        <g id="first-divergent-boundary">
+            <line x1="140" x2="160" y1="185" y2="185" stroke="red" />
+            <text x="40" y="167" transform="rotate(-45, 145, 150)" font-family="Helvetica" font-size="8" fill="red">first divergent boundary</text> 
+        </g>
+        <use x="145" y="150" xlink:href="#chain" />
+        <text transform="rotate(-45, 157, 299)" x="157" y="299" font-family="Helvetica" font-size="8">related target</text>
+    </g>
+    <g id="lowest-common-boundary">
+        <line x1="140" x2="160" y1="125" y2="125" stroke="green" />
+        <text x="44" y="125" font-family="Helvetica" font-size="8" fill="green">lowest common boundary</text> 
+    </g>
+    <g id="shadow-boundary-3">
+        <line x1="140" x2="160" y1="80" y2="80" stroke="lightgray" />
+        <text x="163" y="77" font-family="Helvetica" font-size="8" fill="lightgray">shadow boundary</text> 
+    </g>
+    <use x="145" y="15" xlink:href="#chain" />
+    <g id="document">
+        <circle cx="150" cy="20" r="4" fill="white" stroke="black" />
+        <text x="157" y="20" font-family="Helvetica" font-size="8">document</text>
+    </g>
+</svg>
\ No newline at end of file