1b79b5b6c2
Setting of the `crossorigin` attribute is not necessary for same-origin images, and causes an immediate image reload (albeit from cache) necessitating the use of a load event listener which subsequently mutates the snapshot. This change allows us to avoid the mutation of the snapshot for the same-origin case. * Modify inlineImages test to remove delay and show that we can inline images without mutation * Add an explicit test for when the `image.crossOrigin = 'anonymous';` method is necessary. Uses a combination of about:blank and our test server to simulate a cross-origin context * Other test changes: there were some spurious rrweb mutations being generated by the addition of the crossorigin attribute that are now elimnated from the rrweb/__snapshots__/integration.test.ts.snap after this PR - this is good
887 lines
33 KiB
Plaintext
887 lines
33 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`iframe integration tests snapshot async iframes 1`] = `
|
|
"{
|
|
\\"type\\": 0,
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 1,
|
|
\\"name\\": \\"html\\",
|
|
\\"publicId\\": \\"\\",
|
|
\\"systemId\\": \\"\\",
|
|
\\"id\\": 2
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"html\\",
|
|
\\"attributes\\": {
|
|
\\"lang\\": \\"en\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"head\\",
|
|
\\"attributes\\": {},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 5
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"meta\\",
|
|
\\"attributes\\": {
|
|
\\"charset\\": \\"UTF-8\\"
|
|
},
|
|
\\"childNodes\\": [],
|
|
\\"id\\": 6
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 7
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"meta\\",
|
|
\\"attributes\\": {
|
|
\\"name\\": \\"viewport\\",
|
|
\\"content\\": \\"width=device-width, initial-scale=1.0\\"
|
|
},
|
|
\\"childNodes\\": [],
|
|
\\"id\\": 8
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 9
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"title\\",
|
|
\\"attributes\\": {},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"Main\\",
|
|
\\"id\\": 11
|
|
}
|
|
],
|
|
\\"id\\": 10
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 12
|
|
}
|
|
],
|
|
\\"id\\": 4
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 13
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"body\\",
|
|
\\"attributes\\": {},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 15
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"iframe\\",
|
|
\\"attributes\\": {
|
|
\\"id\\": \\"one\\"
|
|
},
|
|
\\"childNodes\\": [],
|
|
\\"id\\": 16
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 17
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"iframe\\",
|
|
\\"attributes\\": {
|
|
\\"id\\": \\"two\\"
|
|
},
|
|
\\"childNodes\\": [],
|
|
\\"id\\": 18
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\\\n\\\\n\\",
|
|
\\"id\\": 19
|
|
}
|
|
],
|
|
\\"id\\": 14
|
|
}
|
|
],
|
|
\\"id\\": 3
|
|
}
|
|
],
|
|
\\"id\\": 1
|
|
}"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: about-mozilla.html 1`] = `
|
|
"<!DOCTYPE html><html><head>
|
|
<title>The Book of Mozilla, 11:9</title>
|
|
<style type=\\"text/css\\">html { background: maroon; color: white; font-style: italic; }#moztext { margin-top: 15%; font-size: 1.1em; font-family: serif; text-align: center; line-height: 1.5; }#from { font-size: 1.95em; font-family: serif; text-align: right; }em { font-size: 1.3em; line-height: 0; }a { text-decoration: none; color: white; }</style>
|
|
</head><body> <p id=\\"moztext\\">
|
|
Mammon slept. And the <em>beast reborn</em> spread over the earth and its numbers
|
|
grew legion. And they proclaimed the times and <em>sacrificed</em> crops unto the
|
|
fire, with the <em>cunning of foxes</em>. And they built a new world in their own
|
|
image as promised by the <em><a href=\\"http://www.mozilla.org/about/mozilla-manifesto.html\\">
|
|
sacred words</a></em>, and <em><a href=\\"http://wiki.mozilla.org/About:mozilla\\">spoke
|
|
</a></em> of the beast with their children. Mammon awoke, and lo! it was
|
|
<em>naught</em> but a follower.
|
|
</p> <p id=\\"from\\">
|
|
from <strong>The Book of Mozilla,</strong> 11:9<br /><small>(10th Edition)</small>
|
|
</p></body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: background-clip-text.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<title>Document</title>
|
|
<style id=\\"dynamic-style\\">p { border-width: 0.8em; border-color: darkviolet; border-image: initial; border-style: dotted double; margin: 1em 0px; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; }.text { -webkit-background-clip: text; background-clip: text; color: rgba(0, 0, 0, 0.2); }</style>
|
|
</head>
|
|
<body>
|
|
<p class=\\"text\\">The background is clipped to the foreground text.</p>
|
|
<noscript>SCRIPT_PLACEHOLDER</noscript>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: basic.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>Document</title>
|
|
</head><body>
|
|
<h1>Title</h1></body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: block-element.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>Document</title>
|
|
<style>.big { width: 50px; height: 50px; }.small { width: 50px; height: 100px; float: left; }</style>
|
|
</head> <body>
|
|
<div class=\\"rr-block big\\" style=\\"width: 50px; height: 50px;\\"></div>
|
|
<div>record 2</div>
|
|
<div class=\\"rr-block small\\" style=\\"width: 50px; height: 100px;\\"></div>
|
|
<div class=\\"rr-block\\" style=\\"width: 100px; height: 200px;\\"></div>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: compat-mode.html 1`] = `
|
|
"<!-- no doctype! --><html><head>
|
|
<title>Compat Mode; image resizing</title>
|
|
</head>
|
|
<body>
|
|
<center>
|
|
<a href=\\"http://localhost:3030/html#\\" class=\\"should-be-square-shaped\\">
|
|
<img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-left.png\\" />
|
|
<img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-right.png\\" />
|
|
<br /><img width=\\"80%\\" height=\\"20%\\" src=\\"http://localhost:3030/images/compat-bottom.png\\" /></a>
|
|
</center>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: cors-style-sheet.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>with style sheet</title>
|
|
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" />
|
|
<link rel=\\"stylesheet\\" href=\\"\\" />
|
|
</head>
|
|
<body></body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: dynamic-stylesheet.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>dynamic stylesheet</title>
|
|
<style>body { margin: 0px; }p { background: lightpink; }</style>
|
|
<noscript>SCRIPT_PLACEHOLDER</noscript>
|
|
</head>
|
|
<body>
|
|
<p>p tag</p>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: form-fields.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>form fields</title>
|
|
</head> <body>
|
|
<form>
|
|
<label for=\\"text\\">
|
|
<input type=\\"text\\" value=\\"1\\" />
|
|
</label>
|
|
<label for=\\"radio\\">
|
|
<input type=\\"radio\\" checked=\\"\\" />
|
|
</label>
|
|
<label for=\\"checkbox\\">
|
|
<input type=\\"checkbox\\" checked=\\"\\" />
|
|
</label>
|
|
<label for=\\"textarea\\">
|
|
<textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
|
|
<textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
|
|
</label>
|
|
<label for=\\"select\\">
|
|
<select name=\\"\\" id=\\"\\" value=\\"2\\">
|
|
<option value=\\"1\\">1</option>
|
|
<option value=\\"2\\" selected=\\"\\">2</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<input name=\\"tagName\\" />
|
|
</label>
|
|
</form>
|
|
|
|
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: hover.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>hover selector</title>
|
|
<style>div:hover, div.\\\\:hover { background: orange; }div:hover::after, div.\\\\:hover::after { position: absolute; left: 0px; top: 100%; content: \\"dropdown\\"; width: 100px; height: 200px; background: lightblue; }</style>
|
|
</head><body>
|
|
<div>hover me</div>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: iframe.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>iframe</title>
|
|
</head>
|
|
<body>
|
|
<iframe width=\\"100\\" height=\\"50\\"></iframe>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: iframe-inner.html 1`] = `
|
|
"<html><head></head><body><button>inner iframe button</button>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: invalid-attribute.html 1`] = `
|
|
"<html foo=\\"bar\\"><head></head><body>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: invalid-doctype.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<title>Invalid Doctype</title>
|
|
</head>
|
|
<body></body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: invalid-tagname.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<div>Hello</div>
|
|
<div>Hello</div>
|
|
<div></div>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: mask-text.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>Document</title>
|
|
</head> <body>
|
|
<p class=\\"rr-mask\\">**** *</p>
|
|
<div class=\\"rr-mask\\">
|
|
<span>**** *</span>
|
|
</div>
|
|
<div class=\\"rr-mask\\">**** *</div>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: picture.html 1`] = `
|
|
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
|
|
<picture>
|
|
<!-- these are 404 - not sure if that's intentional -->
|
|
<source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
|
|
<img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
|
|
</picture>
|
|
<img src=\\"http://localhost:3030/images/robot.png\\" alt=\\"This is a robot\\" />
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: picture-blob.html 1`] = `
|
|
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
|
|
<img src=\\"blob:http://localhost:xxxx/...\\" alt=\\"This is a robot\\" />
|
|
|
|
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: picture-blob-in-frame.html 1`] = `
|
|
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
|
|
<iframe></iframe>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: picture-in-frame.html 1`] = `
|
|
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
|
|
<iframe></iframe>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: picture-with-inline-onload.html 1`] = `
|
|
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
|
|
<img src=\\"http://localhost:3030/images/robot.png\\" alt=\\"This is a robot\\" style=\\"opacity: 1;\\" _onload=\\"this.style.opacity=1\\" />
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: preload.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<title>Document</title>
|
|
<link />
|
|
<link />
|
|
<link />
|
|
</head>
|
|
<body></body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: shadow-dom.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<title>shadow DOM</title>
|
|
</head>
|
|
<body>
|
|
<fancy-tabs background=\\"\\" role=\\"tablist\\" selected=\\"1\\">
|
|
<button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 1</button>
|
|
<button slot=\\"title\\" selected=\\"\\" role=\\"tab\\" tabindex=\\"0\\" aria-selected=\\"true\\">Tab 2</button>
|
|
<button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 3</button>
|
|
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 1</section>
|
|
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"false\\">content panel 2</section>
|
|
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 3</section>
|
|
</fancy-tabs>
|
|
<noscript>SCRIPT_PLACEHOLDER</noscript>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: svg.html 1`] = `
|
|
"<!DOCTYPE html><html><head>
|
|
<title>IcoMoon - SVG Icons</title>
|
|
<meta charset=\\"utf-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\" />
|
|
</head>
|
|
<body>
|
|
<div class=\\"clearfix mhl ptl\\">
|
|
<h1 class=\\"mvm mtn fgc1\\">Grid Size: 0</h1>
|
|
<div class=\\"glyph fs1\\">
|
|
<div class=\\"clearfix pbs\\">
|
|
<svg xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"Icon Icon-behance\\">
|
|
<use xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xlink:href=\\"http://localhost:3030/images/symbol-defs.svg#Icon-behance\\"/></svg><span class=\\"name\\"> Icon-behance</span>
|
|
</div>
|
|
</div>
|
|
<div class=\\"glyph fs1\\">
|
|
<div class=\\"clearfix pbs\\">
|
|
<svg xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"Icon Icon-linkedin\\">
|
|
<use xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xlink:href=\\"http://localhost:3030/images/symbol-defs.svg#Icon-linkedin\\"/></svg><span class=\\"name\\"> Icon-linkedin</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 -1035.6284324052635 9227.414882379479 1501.846702397534\\">
|
|
<defs>
|
|
<path id=\\"MJMAIN-39\\" stroke-width=\\"10\\" d=\\"M352 287Q304 211 232 211Q154 211 104 270T44 396Q42 412 42 436V444Q42 537 111 606Q171 666 243 666Q245 666 249 666T257 665H261Q273 665 286 663T323 651T370 619T413 560Q456 472 456 334Q456 194 396 97Q361 41 312 10T208 -22Q147 -22 108 7T68 93T121 149Q143 149 158 135T173 96Q173 78 164 65T148 49T135 44L131 43Q131 41 138 37T164 27T206 22H212Q272 22 313 86Q352 142 352 280V287ZM244 248Q292 248 321 297T351 430Q351 508 343 542Q341 552 337 562T323 588T293 615T246 625Q208 625 181 598Q160 576 154 546T147 441Q147 358 152 329T172 282Q197 248 244 248Z\\"/>
|
|
</defs>
|
|
<g stroke=\\"black\\" fill=\\"black\\" stroke-width=\\"0\\" transform=\\"matrix(1 0 0 -1 0 0)\\">
|
|
<use xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xlink:href=\\"#MJMAIN-39\\" x=\\"394\\" y=\\"0\\"/>
|
|
</g>
|
|
</svg>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: video.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>video</title>
|
|
</head>
|
|
<body>
|
|
<video controls=\\"\\">
|
|
<source src=\\"http://techslides.com/demos/sample-videos/small.webm\\" type=\\"video/webm\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.ogv\\" type=\\"video/ogg\\" />
|
|
<source src=\\"http://techslides.com/demos/sample-videos/small.mp4\\" type=\\"video/mp4\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.3gp\\" type=\\"video/3gp\\" />
|
|
</video>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: with-relative-res.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<a href=\\"http://localhost:3030/basic.html\\"></a>
|
|
<div>Hello</div>
|
|
<alt34>Hello</alt34>
|
|
<div>Hello</div>
|
|
<div></div>
|
|
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
|
|
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg\\" />
|
|
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://exmple.com/a.jpg\\" />
|
|
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x, http://localhost:3030/a.jpg 45x, http://localhost:3030/b.png\\" />
|
|
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/300,400/a.jpg 300w, http://localhost:3030/b.png\\" /></body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: with-script.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>with script</title>
|
|
</head><body>
|
|
<noscript src=\\"http://localhost:3030/js/a.js\\"></noscript>
|
|
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: with-style-sheet.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>with style sheet</title>
|
|
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,<svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"><g><g><polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/></g></g></svg>\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body > p { color: yellow; }</style>
|
|
</head><body>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`integration tests [html file]: with-style-sheet-with-import.html 1`] = `
|
|
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
|
<meta charset=\\"UTF-8\\" />
|
|
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
|
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
|
<title>with style sheet with import</title>
|
|
<style>@import url(\\"//fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@100;300;400;500;700&display=swap\\\\\\"\\");body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,<svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"><g><g><polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/></g></g></svg>\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body > p { color: yellow; }</style>
|
|
</head><body>
|
|
</body></html>"
|
|
`;
|
|
|
|
exports[`shadow DOM integration tests snapshot shadow DOM 1`] = `
|
|
"{
|
|
\\"type\\": 0,
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 1,
|
|
\\"name\\": \\"html\\",
|
|
\\"publicId\\": \\"\\",
|
|
\\"systemId\\": \\"\\",
|
|
\\"id\\": 2
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"html\\",
|
|
\\"attributes\\": {
|
|
\\"lang\\": \\"en\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"head\\",
|
|
\\"attributes\\": {},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 5
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"meta\\",
|
|
\\"attributes\\": {
|
|
\\"charset\\": \\"UTF-8\\"
|
|
},
|
|
\\"childNodes\\": [],
|
|
\\"id\\": 6
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 7
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"meta\\",
|
|
\\"attributes\\": {
|
|
\\"name\\": \\"viewport\\",
|
|
\\"content\\": \\"width=device-width, initial-scale=1.0\\"
|
|
},
|
|
\\"childNodes\\": [],
|
|
\\"id\\": 8
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 9
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"title\\",
|
|
\\"attributes\\": {},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"shadow DOM\\",
|
|
\\"id\\": 11
|
|
}
|
|
],
|
|
\\"id\\": 10
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 12
|
|
}
|
|
],
|
|
\\"id\\": 4
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 13
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"body\\",
|
|
\\"attributes\\": {},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 15
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"fancy-tabs\\",
|
|
\\"attributes\\": {
|
|
\\"background\\": \\"\\",
|
|
\\"role\\": \\"tablist\\",
|
|
\\"selected\\": \\"1\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 17
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"button\\",
|
|
\\"attributes\\": {
|
|
\\"slot\\": \\"title\\",
|
|
\\"role\\": \\"tab\\",
|
|
\\"tabindex\\": \\"-1\\",
|
|
\\"aria-selected\\": \\"false\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"Tab 1\\",
|
|
\\"id\\": 19
|
|
}
|
|
],
|
|
\\"id\\": 18
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 20
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"button\\",
|
|
\\"attributes\\": {
|
|
\\"slot\\": \\"title\\",
|
|
\\"selected\\": \\"\\",
|
|
\\"role\\": \\"tab\\",
|
|
\\"tabindex\\": \\"0\\",
|
|
\\"aria-selected\\": \\"true\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"Tab 2\\",
|
|
\\"id\\": 22
|
|
}
|
|
],
|
|
\\"id\\": 21
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 23
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"button\\",
|
|
\\"attributes\\": {
|
|
\\"slot\\": \\"title\\",
|
|
\\"role\\": \\"tab\\",
|
|
\\"tabindex\\": \\"-1\\",
|
|
\\"aria-selected\\": \\"false\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"Tab 3\\",
|
|
\\"id\\": 25
|
|
}
|
|
],
|
|
\\"id\\": 24
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 26
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"section\\",
|
|
\\"attributes\\": {
|
|
\\"role\\": \\"tabpanel\\",
|
|
\\"tabindex\\": \\"0\\",
|
|
\\"aria-hidden\\": \\"true\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"content panel 1\\",
|
|
\\"id\\": 28
|
|
}
|
|
],
|
|
\\"id\\": 27
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 29
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"section\\",
|
|
\\"attributes\\": {
|
|
\\"role\\": \\"tabpanel\\",
|
|
\\"tabindex\\": \\"0\\",
|
|
\\"aria-hidden\\": \\"false\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"content panel 2\\",
|
|
\\"id\\": 31
|
|
}
|
|
],
|
|
\\"id\\": 30
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 32
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"section\\",
|
|
\\"attributes\\": {
|
|
\\"role\\": \\"tabpanel\\",
|
|
\\"tabindex\\": \\"0\\",
|
|
\\"aria-hidden\\": \\"true\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"content panel 3\\",
|
|
\\"id\\": 34
|
|
}
|
|
],
|
|
\\"id\\": 33
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 35
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 36,
|
|
\\"isShadow\\": true
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"style\\",
|
|
\\"attributes\\": {},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\":host { display: inline-block; width: 650px; font-family: \\\\\\"Roboto Slab\\\\\\"; contain: content; }:host([background]) { background: var(--background-color, #9E9E9E); border-radius: 10px; padding: 10px; }#panels { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px; background: white; border-radius: 3px; padding: 16px; height: 250px; overflow: auto; }#tabs { display: inline-flex; user-select: none; }#tabs slot { display: inline-flex; }#tabs ::slotted(*) { font: 400 16px / 22px Roboto; padding: 16px 8px; margin: 0px; text-align: center; width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; background: linear-gradient(rgb(250, 250, 250), rgb(238, 238, 238)); border: none; }#tabs ::slotted([aria-selected=\\\\\\"true\\\\\\"]) { font-weight: 600; background: white; box-shadow: none; }#tabs ::slotted(:focus) { z-index: 1; }#panels ::slotted([aria-hidden=\\\\\\"true\\\\\\"]) { display: none; }\\",
|
|
\\"isStyle\\": true,
|
|
\\"id\\": 38
|
|
}
|
|
],
|
|
\\"id\\": 37,
|
|
\\"isShadow\\": true
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 39,
|
|
\\"isShadow\\": true
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"div\\",
|
|
\\"attributes\\": {
|
|
\\"id\\": \\"tabs\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 41
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"slot\\",
|
|
\\"attributes\\": {
|
|
\\"id\\": \\"tabsSlot\\",
|
|
\\"name\\": \\"title\\"
|
|
},
|
|
\\"childNodes\\": [],
|
|
\\"id\\": 42
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 43
|
|
}
|
|
],
|
|
\\"id\\": 40,
|
|
\\"isShadow\\": true
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 44,
|
|
\\"isShadow\\": true
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"div\\",
|
|
\\"attributes\\": {
|
|
\\"id\\": \\"panels\\"
|
|
},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 46
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"slot\\",
|
|
\\"attributes\\": {
|
|
\\"id\\": \\"panelsSlot\\"
|
|
},
|
|
\\"childNodes\\": [],
|
|
\\"id\\": 47
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 48
|
|
}
|
|
],
|
|
\\"id\\": 45,
|
|
\\"isShadow\\": true
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 49,
|
|
\\"isShadow\\": true
|
|
}
|
|
],
|
|
\\"isCustom\\": true,
|
|
\\"id\\": 16,
|
|
\\"isShadowHost\\": true
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\",
|
|
\\"id\\": 50
|
|
},
|
|
{
|
|
\\"type\\": 2,
|
|
\\"tagName\\": \\"script\\",
|
|
\\"attributes\\": {},
|
|
\\"childNodes\\": [
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
|
|
\\"id\\": 52
|
|
}
|
|
],
|
|
\\"id\\": 51
|
|
},
|
|
{
|
|
\\"type\\": 3,
|
|
\\"textContent\\": \\"\\\\n \\\\n\\\\n\\",
|
|
\\"id\\": 53
|
|
}
|
|
],
|
|
\\"id\\": 14
|
|
}
|
|
],
|
|
\\"id\\": 3
|
|
}
|
|
],
|
|
\\"id\\": 1
|
|
}"
|
|
`;
|