AsciidoctorでHTMLを埋め込んで表示しようとすると埋め込むHTMLのスタイルシートが親に適用されてしまう。
iframe形式で埋め込んで適用されないようにする。
方法
AsciidoctorのパススルーブロックでHTMLを埋め込み、iframeのsrcdocを使用してHTMLを表示する。
report.html
<html>
<head>
<title>Myテストレポート - Allure Docker Service</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.css">
<link rel="shortcut icon" href="/static/favicon">
</head>
<body>
<div class="container jumbotron">
<div class="display-4 lead">Myテストレポート</div>
<div class="lead">Allure Docker Service</div>
<br>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Project ID
<span class="badge badge-light badge-pill">
default
</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Server Link
<span class="badge badge-light badge-pill">
<a href="https://www.szk302.dev/" target="_blank">https://www.szk302.dev/</a>
</span>
</li>
</ul>
<br>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col" class="table-active text-center">Total</th>
<th scope="col" class="table-success text-center">Passed</th>
<th scope="col" class="table-danger text-center">Failed</th>
<th scope="col" class="table-warning text-center">Broken</th>
<th scope="col" class="table-light text-center">Skipped</th>
<th scope="col" class="table-dark text-center">Unknown</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col" class="text-center">2</th>
<th scope="col" class="text-center">1 (50.00%)</th>
<th scope="col" class="text-center">1 (50.00%)</th>
<th scope="col" class="text-center">0 (0.00%)</th>
<th scope="col" class="text-center">0 (0.00%)</th>
<th scope="col" class="text-center">0 (0.00%)</th>
</tr>
</tbody>
</table>
</div>
<hr class="my-4">
<div class="card border-secondary mb-3 border-success">
<div class="card-header">
testSomeLibraryMethod()
<span class="badge badge-pill badge-success">passed</span>
</div>
<div class="card-body">
<!-- CARD TEXT -->
<p class="card-text">
<b>description:</b>
<br>
<b>duration:</b> 0.042 s
<br>
<b>severity:</b> normal
<br>
<b>suite:</b> sample.timeout.SampleTest1
<br>
<b>testClass:</b> sample.timeout.SampleTest1
<br>
<b>package:</b> sample.timeout.SampleTest1
<br>
<br>
</p>
<!-- TABLE -->
</div>
</div>
<div class="card border-secondary mb-3 border-danger">
<div class="card-header">
testSomeLibraryMethod()
<span class="badge badge-pill badge-danger">failed</span>
</div>
<div class="card-body">
<!-- CARD TEXT -->
<p class="card-text">
<b>description:</b>
<br>
<b>duration:</b> 0.052 s
<br>
<b>severity:</b> normal
<br>
<b>suite:</b> sample.timeout.SampleTest2
<br>
<b>testClass:</b> sample.timeout.SampleTest2
<br>
<b>package:</b> sample.timeout.SampleTest2
<br>
<br>
</p>
<!-- TABLE -->
</div>
</div>
</div>
</body>
</html>
HTMLをエスケープ
sed 's/&/\&/g; s/</\</g; s/>/\>/g; s/"/\"/g; s/'"'"'/\'/g' report.html > escaped_report.html
AsciiDoc形式のファイルに埋め込み
++++
<iframe width="700" height="1150" srcdoc="<html> <head> <title>Myテストレポート - Allure Docker Service</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.css"> <link rel="shortcut icon" href="/static/favicon"> </head> <body> <div class="container jumbotron"> <div class="display-4 lead">Myテストレポート</div> <div class="lead">Allure Docker Service</div> <br> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Project ID <span class="badge badge-light badge-pill"> default </span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Server Link <span class="badge badge-light badge-pill"> <a href="https://www.szk302.dev/" target="_blank">https://www.szk302.dev/</a> </span> </li> </ul> <br> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th scope="col" class="table-active text-center">Total</th> <th scope="col" class="table-success text-center">Passed</th> <th scope="col" class="table-danger text-center">Failed</th> <th scope="col" class="table-warning text-center">Broken</th> <th scope="col" class="table-light text-center">Skipped</th> <th scope="col" class="table-dark text-center">Unknown</th> </tr> </thead> <tbody> <tr> <th scope="col" class="text-center">2</th> <th scope="col" class="text-center">1 (50.00%)</th> <th scope="col" class="text-center">1 (50.00%)</th> <th scope="col" class="text-center">0 (0.00%)</th> <th scope="col" class="text-center">0 (0.00%)</th> <th scope="col" class="text-center">0 (0.00%)</th> </tr> </tbody> </table> </div> <hr class="my-4"> <div class="card border-secondary mb-3 border-success"> <div class="card-header"> testSomeLibraryMethod() <span class="badge badge-pill badge-success">passed</span> </div> <div class="card-body"> <!-- CARD TEXT --> <p class="card-text"> <b>description:</b> <br> <b>duration:</b> 0.042 s <br> <b>severity:</b> normal <br> <b>suite:</b> sample.timeout.SampleTest1 <br> <b>testClass:</b> sample.timeout.SampleTest1 <br> <b>package:</b> sample.timeout.SampleTest1 <br> <br> </p> <!-- TABLE --> </div> </div> <div class="card border-secondary mb-3 border-danger"> <div class="card-header"> testSomeLibraryMethod() <span class="badge badge-pill badge-danger">failed</span> </div> <div class="card-body"> <!-- CARD TEXT --> <p class="card-text"> <b>description:</b> <br> <b>duration:</b> 0.052 s <br> <b>severity:</b> normal <br> <b>suite:</b> sample.timeout.SampleTest2 <br> <b>testClass:</b> sample.timeout.SampleTest2 <br> <b>package:</b> sample.timeout.SampleTest2 <br> <br> </p> <!-- TABLE --> </div> </div> </div> </body> </html>">
</iframe>
++++