summaryrefslogtreecommitdiff
path: root/test/data
diff options
context:
space:
mode:
Diffstat (limited to 'test/data')
-rw-r--r--test/data/html/test-document2-frame2.svg15
-rw-r--r--test/data/html/test-document2-script.js4
-rw-r--r--test/data/html/test-document2.html68
3 files changed, 81 insertions, 6 deletions
diff --git a/test/data/html/test-document2-frame2.svg b/test/data/html/test-document2-frame2.svg
new file mode 100644
index 00000000..380eab97
--- /dev/null
+++ b/test/data/html/test-document2-frame2.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<style>
+:root {
+ background-color: #f8f8f8;
+}
+text {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ fill: #000000;
+ dominant-baseline: hanging;
+}
+</style>
+<text x="7" y="12">ありがとう</text>
+</svg> \ No newline at end of file
diff --git a/test/data/html/test-document2-script.js b/test/data/html/test-document2-script.js
index ab516a4e..01bc211f 100644
--- a/test/data/html/test-document2-script.js
+++ b/test/data/html/test-document2-script.js
@@ -58,6 +58,10 @@ function setup(container, fullscreenElement=null) {
if (template !== null && templateContentContainer !== null) {
const mode = container.dataset.shadowMode;
const shadow = templateContentContainer.attachShadow({mode});
+
+ const containerStyles = document.querySelector('#container-styles');
+ shadow.appendChild(containerStyles.cloneNode(true));
+
const content = document.importNode(template.content, true);
setup(content);
shadow.appendChild(content);
diff --git a/test/data/html/test-document2.html b/test/data/html/test-document2.html
index 6d174571..10fecbbb 100644
--- a/test/data/html/test-document2.html
+++ b/test/data/html/test-document2.html
@@ -8,6 +8,24 @@
<link rel="stylesheet" href="test-stylesheet.css" />
<script src="test-document2-script.js"></script>
</head>
+ <style id="container-styles">
+.container {
+ width: 100%;
+ height: 200px;
+ border: 1px solid #d8d8d8;
+ position: relative;
+ box-sizing: border-box;
+}
+.container-inner {
+ background-color: #f8f8f8;
+ padding: 0.5em;
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+}
+ </style>
<body>
<h1>Yomichan Manual Tests</h1>
@@ -15,7 +33,7 @@
<y-test>
<y-description>Standard content.</y-description>
- <div class="fullscreen-element" style="width: 100%; height: 200px; border: 1px solid #d8d8d8; position: relative;"><div style="background-color: #f8f8f8; padding: 0.5em; position: absolute; left: 0; top: 0; bottom: 0; right: 0;">
+ <div class="fullscreen-element container"><div class="container-inner">
<div>
ありがとう
</div>
@@ -30,7 +48,7 @@
<div class="template-content-container"></div>
<template>
<link rel="stylesheet" href="test-stylesheet.css" />
- <div class="fullscreen-element" style="width: 100%; height: 200px; border: 1px solid #d8d8d8; position: relative;"><div style="background-color: #f8f8f8; padding: 0.5em; position: absolute; left: 0; top: 0; bottom: 0; right: 0;">
+ <div class="fullscreen-element container"><div class="container-inner">
<div>
ありがとう
</div>
@@ -46,7 +64,7 @@
<div class="template-content-container"></div>
<template>
<link rel="stylesheet" href="test-stylesheet.css" />
- <div class="fullscreen-element" style="width: 100%; height: 200px; border: 1px solid #d8d8d8; position: relative;"><div style="background-color: #f8f8f8; padding: 0.5em; position: absolute; left: 0; top: 0; bottom: 0; right: 0;">
+ <div class="fullscreen-element container"><div class="container-inner">
<div>
ありがとう
</div>
@@ -59,14 +77,14 @@
<y-test>
<y-description>&lt;iframe&gt; element.</y-description>
- <iframe src="test-document2-frame1.html" allowfullscreen="true" style="width: 100%; height: 200px; border: 1px solid #d8d8d8;"></iframe>
+ <iframe src="test-document2-frame1.html" allowfullscreen="true" class="container"></iframe>
</y-test>
<y-test data-shadow-mode="open">
<y-description>&lt;iframe&gt; element inside of an open shadow DOM.</y-description>
<div class="template-content-container"></div>
<template>
- <iframe src="test-document2-frame1.html" allowfullscreen="true" style="width: 100%; height: 200px; border: 1px solid #d8d8d8;"></iframe>
+ <iframe src="test-document2-frame1.html" allowfullscreen="true" class="container"></iframe>
</template>
</y-test>
@@ -74,10 +92,48 @@
<y-description>&lt;iframe&gt; element inside of a closed shadow DOM.</y-description>
<div class="template-content-container"></div>
<template>
- <iframe src="test-document2-frame1.html" allowfullscreen="true" style="width: 100%; height: 200px; border: 1px solid #d8d8d8;"></iframe>
+ <iframe src="test-document2-frame1.html" allowfullscreen="true" class="container"></iframe>
</template>
</y-test>
+ <y-test>
+ <y-description>SVG &lt;img&gt;.</y-description>
+ <img src="test-document2-frame2.svg" class="container">
+ </y-test>
+
+ <y-test>
+ <y-description>SVG &lt;object&gt;.</y-description>
+ <object data="test-document2-frame2.svg" type="image/svg+xml" class="container"></object>
+ </y-test>
+
+ <y-test>
+ <y-description>SVG &lt;embed&gt;.</y-description>
+ <embed type="image/svg+xml" src="test-document2-frame2.svg" class="container">
+ </y-test>
+
+ <y-test>
+ <y-description>SVG &lt;iframe&gt;.</y-description>
+ <iframe src="test-document2-frame2.svg" allowfullscreen="true" class="container"></iframe>
+ </y-test>
+
+ <y-test>
+ <y-description>SVG &lt;svg&gt;.</y-description>
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="container" style="background-color: #f8f8f8;">
+ <text
+ x="7"
+ y="12"
+ style="
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ fill: #000000;
+ dominant-baseline: hanging;"
+ >
+ ありがとう
+ </text>
+ </svg>
+ </y-test>
+
+
<script>
for (const element of document.querySelectorAll('y-test')) {
setup(element);