Use SVG for the flipped blocks relpos diagram.

third_party/WebKit/Source/core/layout/README.md

 # `Source/core/layout`
 
 This directory contains implementation of layout objects. It covers the
 following document lifecycle states:
 
 * LayoutSubtreeChange (`InLayoutSubtreeChange` and `LayoutSubtreeChangeClean`)
 * PreLayout (`InPreLayout`)
 * PerformLayout (`InPerformLayout`)
 * AfterPerformLayout (`AfterPerformLayout` and `LayoutClean`)
 
@@ skipping 135 matching lines @@
     </style>
     <div id="container" style="background-color: lightBlue; width: 300px; height: 200px;">
       <div id="relpos" style="position: relative; top: 50px; left: -60px; width: 70px; height: 80px; background-color: red;"></div>
     </div>
 
 The final location of these within an 800x600 frame is as:
 
     container: (492, 8  300x200)
     relpos:    (662, 58 70x80)
 
-See the [diagram](https://docs.google.com/drawings/d/1k5lOzQxhfRQ1J4HknGByJPJfpDV4o_N_ZuVTvveiSaw/edit?usp=sharing)
-for full detail on dimensions of the involved elements.
+See the [diagram](resources/flipped-blocks-relpos.svg) for full detail on
+dimensions of the involved elements.
 
 Determining the paint invalidation rect for `relpos` via
 `mapToVisualRectInAncestorSpace()` involves walking up the layout tree from
 `relpos` flipping the rect within its container at each box. Below we sketch
 each step as we recurse toward the top of the document, with 'this' on the left,
 the current rect being mapped on the right, and explanation beneath each:
 
     LayoutBlockFlow (relative positioned) DIV id='relpos'   0,0    70x80
 
         Apply the relative position of 'relpos' while flipping within
@@ skipping 131 matching lines @@
   left-to-right or right-to-left block flow. Geometry is transposed for vertical
   writing mode. See calls to `transposed{Rect,Point,Size}()`.
 * `direction`/`dir`: "inline base direction" of a box. One of `ltr` or
   `rtl`. See calls to `isLeftToRightDirection()`.
 * `text-orientation`: orientation of text in a line. Only relevant for vertical
   modes.
 * orthogonal flow: when a box has a writing mode perpendicular to its containing
   block. This can lead to complex cases. See
   [specification](https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows)
   for more.