Fix serialized iframe relative URLs

[wwilsman]

When a same-origin frame is serialized, all of its content becomes relative to the frame parent.

In the example below, localhost:8080/bar/styles.css would be proper location of the stylesheet.

<!-- localhost:8080/foo -->
<iframe src="/bar"></iframe>

<!-- localhost:8080/bar -->
<link href="styles.css" rel="stylesheet"/>

After serializing, the resulting DOM would look like:

<!-- localhost:8080/foo -->
<iframe srcdoc="<link href=\"styles.css\" rel=\"stylesheet\"/>"></iframe>

And with that DOM, the stylesheet request will be interpreted as localhost:8080/foo/style.css. Which is incorrect. This issue might also be present if the embedded iframe is not same-origin but allows cross-origin resource sharing instead.

We can likely fix this, albeit a little heavy handed, by prepending all nested relative URLs with the iframe's src.

Frame Source	Asset URL	Serialized URL
/bar	styles.css	/bar/styles.css
//example.com/bar	styles.css	//example.com/bar/styles.css
//example.com/bar	/styles.css	//example.com/styles.css

Open to other solutions as well

[wwilsman]

If you are experiencing this and have control over the embedded document, switching to absolute URLs for same-origins, or fully qualified URLs for cross-origins will work around the issue.

If you cannot control the embedded document, you should still be able to do the same using a test helper to transform the DOM before taking a snapshot.