epub gallery tests

by zircon

HTML

<!--
<p>EPUB image gallery test: 
Images side by side using float, flex, percentage + grid.</p>
<p>Test Summation: Tested on ADE, Pocketbook, Aldiko, Moon+, Kobo, (all on Android). ReadEra, and Eboox renders each image full size. Moon+ was a puzzle.</p>
-->

<!--1-->
<!--This will switch to grid when it's below 21em-->
<div class="wrapper1 pagebreak-after">
  <img src="https://placehold.co/150.png?text=1"/>
  <img src="https://placehold.co/150.png?text=2"/>
</div>

<!--2-->
<div class="wrapper2 pagebreak-after">
  <img src="https://placehold.co/150.png?text=1"/>
  <img src="https://placehold.co/150.png?text=2"/>
</div>

<!--3-->
<div class="wrapper3 pagebreak-after">
  <div class="inner3">
    <img src="https://placehold.co/150.png?text=1"/>
	  <div class="cap">caption</div>
  </div>
  <div class="inner3">
    <img src="https://placehold.co/150.png?text=2"/>
	  <div class="cap">caption</div>
  </div>
</div>

<!--4-->
<div class="wrapper4 pagebreak-after">
  <div class="inner4">
    <img src="https://placehold.co/150x150.png?text=1"/>
    <div class="cap">caption</div>
  </div>
  <div class="inner4">
    <img src="https://placehold.co/150x150.png?text=2"/>
    <div class="cap">caption</div>
  </div>
</div>

<!--5-->
<div class="grid-container pagebreak-after">
  <div class="grid-item">
    <img src="https://i.postimg.cc/28LWCwdv/i4313.jpg"/>
  </div>
  <div class="grid-item">
    <img src="https://i.postimg.cc/28LWCwdv/i4313.jpg"/>
  </div>
</div>

CSS

/* ----------page setup for all---------- */
html, body {
  font-family: Arial, sans-serif;
  font-size: 1em;
  height: 100%;
}
/* mobile viewport bug fix */
body {
  min-height: 99.5vh;
}
html {
  height: 100%;
  max-height: 100%;
  height: fill-available;
  height: -webkit-fill-available;
}
*,*:before,*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.pagebreak-after {
  page-break-inside:avoid;
  page-break-after:always; /* old rule fallback */
  break-after: page;
}
/* misc */
.cap {background-color: rgb(230,230,230);}

/* --Each core test numbered as follows-- */

/* ---Test 1--- */
.wrapper1 { 
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0,0,0);
  text-align: center;
  height: 99.5vh;
}
.wrapper1 img {
  padding: 5px;
  margin: 0;
  width: 50%;
  max-width: 15em;
}
/* make two images vertically aligned one above the other for very small screens */
@media screen and (min-width: 0em) and (max-width: 21em) {
  .wrapper1 {
    display: grid;
	  grid-template-rows: auto auto;
    background-color: rgb(50,50,50); 
	  justify-content: center;
	  align-items: center;
	  /* push lower image up against upper image */
	  align-content: start;
  }
  .wrapper1 img {
	  display: block;
	  width: auto;
	  max-width: 100%;
    max-height: 50vh;
  }
}

/* ---Test 2 - same as #1 + border--- */
.wrapper2 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(220,220,220);
  text-align: center;
  height: 99.5vh;
}
.wrapper2 img {
  padding: 5px;
  background-color: rgb(150,150,150);
  width: 50%;
  max-width: 15em;
  padding: 5px;
  margin: 0;
  border: 2px solid #000;
}

/* ---Test 3--- */
.wrapper3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: rgb(250,250,250);
  height: 99.5vh;
}
.inner3 {
  width: 50%;
  padding: 5px;
  text-align: center;
}
.inner3 img {
  width: 100%;
  max-width: 15em;
  border: 2px solid...