Skip to content

Commit 4a8ed0a

Browse files
jkphljkphl
committed
Add test page
1 parent 3b3fef9 commit 4a8ed0a

File tree

1 file changed

+223
-16
lines changed

1 file changed

+223
-16
lines changed

‎dev/build.php

+223-16
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,39 @@
4646
body {
4747
margin: 0;
4848
font-family: Arial, Helvetica, sans-serif;
49+
padding-bottom: 4em;
50+
line-height: 1.4;
4951
}
5052

51-
#container {
53+
header {
54+
padding: 1em;
55+
}
56+
57+
table {
58+
width: 100%;
59+
}
60+
61+
td, th {
62+
vertical-align: top;
63+
}
64+
65+
th {
66+
text-align: left;
67+
width: 11em;
68+
}
69+
70+
ul {
71+
list-style-type: none;
72+
padding: 0;
73+
margin: 0;
74+
display: flex;
75+
}
76+
77+
li:not(:first-child)::before {
78+
content: ', ';
79+
}
80+
81+
.container {
5282
position: relative;
5383
height: 0;
5484
padding-top: calc(200% / 3);
@@ -57,36 +87,213 @@
5787
background-size: cover;
5888
}
5989

60-
#size {
90+
@media (min-width: 32em) {
91+
#container-3 {
92+
width: 50%;
93+
padding-top: calc(100% / 3);
94+
}
95+
}
96+
97+
@media (min-width: 64em) {
98+
#container-3 {
99+
width: 33.3333%;
100+
padding-top: calc(200% / 9);
101+
}
102+
}
103+
104+
.size {
61105
position: absolute;
62106
top: 1em;
63107
left: 1em;
64108
}
65109

66-
/* jkphl/reponsive-images-css */
110+
pre {
111+
width: calc(100vw - 13em);
112+
margin: 0;
113+
overflow-x: scroll;
114+
}
115+
116+
/* Full-width image, width based srcset */
67117
<?php
68118

69-
$generator = new \Jkphl\Respimgcss\Ports\Generator(['400px', '800px', '1200px', '1600px'], 16);
70-
$generator->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/400x267.png', '400w');
71-
$generator->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/800x534.png', '800w');
72-
$generator->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/1200x800.png', '1200w');
73-
$generator->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/1600x1067.png', '1600w');
119+
$generator1 = new \Jkphl\Respimgcss\Ports\Generator(['400px', '800px', '1200px', '1600px'], 16);
120+
$generator1->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/400x267.png', '400w');
121+
$generator1->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/800x534.png', '800w');
122+
$generator1->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/1200x800.png', '1200w');
123+
$generator1->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/1600x1067.png', '1600w');
124+
125+
$css1 = $generator1->make([1, 2]);
126+
echo $css1 = $css1->toCss('#container-1');
74127

75-
$css = $generator->make([1, 2]);
76-
echo $css->toCss('#container');
128+
?>
129+
130+
/* Full-width image, density based srcset */
131+
<?php
132+
133+
$generator2 = new \Jkphl\Respimgcss\Ports\Generator([], 16);
134+
$generator2->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/800x534.png', '1x');
135+
$generator2->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/1600x1067.png', '2x');
136+
137+
$css2 = $generator2->make([1, 2]);
138+
echo $css2 = $css2->toCss('#container-2');
139+
140+
?>
141+
142+
/* 1-2-3 column layout, width based srcset with sizes */
143+
<?php
144+
145+
$generator3 = new \Jkphl\Respimgcss\Ports\Generator(['32em', '64em'], 16);
146+
$generator3->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/400x267.png', '400w');
147+
$generator3->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/800x534.png', '800w');
148+
$generator3->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/1200x800.png', '1200w');
149+
$generator3->registerImageCandidate('../src/Respimgcss/Tests/Fixture/Images/1600x1067.png', '1600w');
150+
151+
$css3= $generator3->make([1, 2], '(min-width: 32em) 50vw, (min-width: 64em) 33.3333vw, 100vw');
152+
echo $css3= $css3->toCss('#container-3');
77153

78154
?>
79155
</style>
80156
</head>
81157
<body>
82-
<div id="container">
83-
<div id="size"></div>
84-
</div>
158+
<header>
159+
<h1>Responsive background images</h1>
160+
<p>Device pixel ratio:
161+
<script>document.write(window.devicePixelRatio)</script>
162+
</p>
163+
</header>
164+
165+
<section>
166+
<header>
167+
<h2>A) Full-width image, width based srcset</h2>
168+
<table>
169+
<tr>
170+
<th>Breakpoints</th>
171+
<td>
172+
<ul>
173+
<li>400px</li>
174+
<li>800px</li>
175+
<li>1200px</li>
176+
<li>1600px</li>
177+
</ul>
178+
</td>
179+
</tr>
180+
<tr>
181+
<th>Densities</th>
182+
<td>
183+
<ul>
184+
<li>1</li>
185+
<li>2</li>
186+
</ul>
187+
</td>
188+
</tr>
189+
<tr>
190+
<th>srcset</th>
191+
<td><code>400x267.png 400w, 800x534.png 800w, 1200x800.png 1200w, 1600x1067.png 600w</code></td>
192+
</tr>
193+
<tr>
194+
<th>sizes</th>
195+
<td>—</td>
196+
</tr>
197+
<tr>
198+
<th>CSS</th>
199+
<td>
200+
<pre><code><?= $css1; ?></code></pre>
201+
</td>
202+
</tr>
203+
</table>
204+
</header>
205+
<div class="container" id="container-1">
206+
<div class="size"></div>
207+
</div>
208+
</section>
209+
210+
<section>
211+
<header>
212+
<h2>B) Full-width image, density based srcset</h2>
213+
<table>
214+
<tr>
215+
<th>Breakpoints</th>
216+
<td>(ignored)</td>
217+
</tr>
218+
<tr>
219+
<th>Densities</th>
220+
<td>
221+
<ul>
222+
<li>1</li>
223+
<li>2</li>
224+
</ul>
225+
</td>
226+
</tr>
227+
<tr>
228+
<th>srcset</th>
229+
<td><code>800x534.png 1x, 1600x1067.png 2x</code></td>
230+
</tr>
231+
<tr>
232+
<th>sizes</th>
233+
<td>—</td>
234+
</tr>
235+
<tr>
236+
<th>CSS</th>
237+
<td>
238+
<pre><code><?= $css2; ?></code></pre>
239+
</td>
240+
</tr>
241+
</table>
242+
</header>
243+
<div class="container" id="container-2">
244+
<div class="size"></div>
245+
</div>
246+
</section>
247+
248+
<section>
249+
<header>
250+
<h2>C) 1-2-3 column layout, width based srcset with sizes</h2>
251+
<table>
252+
<tr>
253+
<th>Breakpoints</th>
254+
<td>
255+
<ul>
256+
<li>32em</li>
257+
<li>64em</li>
258+
</ul>
259+
</td>
260+
</tr>
261+
<tr>
262+
<th>Densities</th>
263+
<td>
264+
<ul>
265+
<li>1</li>
266+
<li>2</li>
267+
</ul>
268+
</td>
269+
</tr>
270+
<tr>
271+
<th>srcset</th>
272+
<td><code>800x534.png 1x, 1600x1067.png 2x</code></td>
273+
</tr>
274+
<tr>
275+
<th>sizes</th>
276+
<td><code>(min-width: 32em) 50vw, (min-width: 64em) 33.3333vw, 100vw</code></td>
277+
</tr>
278+
<tr>
279+
<th>CSS</th>
280+
<td>
281+
<pre><code><?= $css3; ?></code></pre>
282+
</td>
283+
</tr>
284+
</table>
285+
</header>
286+
<div class="container" id="container-3">
287+
<div class="size"></div>
288+
</div>
289+
</section>
290+
85291
<script>
86-
var container = document.getElementById('container');
87-
var size = document.getElementById('size');
292+
var sizes = document.querySelectorAll('.size');
88293
(window.onresize = function () {
89-
size.innerHTML = 'Device pixel ratio: ' + window.devicePixelRatio + '<br>Container size: ' + container.clientWidth + '×' + container.clientHeight + ' px';
294+
sizes.forEach(function (size) {
295+
size.innerHTML = 'Container size: ' + size.parentNode.clientWidth + '×' + size.parentNode.clientHeight + ' px';
296+
})
90297
})();
91298
</script>
92299
</body>

0 commit comments

Comments
 (0)