Skip to content

Commit 66a89af

Browse files
CybotTMCybotTM
committed
test: add integration tests for float class modernization
Cover align left/right/center, legacy float-left/float-right rewriting, mixed classes (float-left with-shadow), simultaneous :align: + :class:, and standalone image directives. Verify deprecation warnings are emitted for all legacy class usages.
1 parent 015aef5 commit 66a89af

6 files changed

Lines changed: 473 additions & 4 deletions

File tree

‎Documentation-rendertest/ImagesAndFigures/FloatAndAlignment.rst‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Image float left
2020

2121
.. |example-teaser-left| image:: ../images/q150_cccccc.png
2222
:alt: Left floating image
23-
:class: float-left with-shadow
23+
:class: float-start with-shadow
2424

2525
|example-teaser-left|
2626
Typesetting is the composition of text by means of arranging physical
@@ -41,7 +41,7 @@ Image float right
4141

4242
.. |example-teaser-right| image:: ../images/q150_cccccc.png
4343
:alt: Right floating image
44-
:class: float-right with-shadow
44+
:class: float-end with-shadow
4545

4646
|example-teaser-right|
4747
Typesetting is the composition of text by means of arranging physical
@@ -62,7 +62,8 @@ Figure float left
6262

6363
.. figure:: ../images/q150_cccccc.png
6464
:alt: Left floating figure
65-
:class: float-left with-shadow
65+
:align: left
66+
:class: with-shadow
6667

6768
A figure floated to the left
6869

@@ -85,7 +86,8 @@ Figure float right
8586

8687
.. figure:: ../images/q150_cccccc.png
8788
:alt: Right floating figure
88-
:class: float-right with-shadow
89+
:align: right
90+
:class: with-shadow
8991

9092
A figure floated to the right
9193

‎tests/Integration/tests/images/Float/expected/index.html‎

Lines changed: 359 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,359 @@
1+
<!DOCTYPE html>
2+
<html class="no-js" lang="en">
3+
<head>
4+
<title>Float Tests
5+
documentation</title>
6+
7+
8+
<meta charset="utf-8">
9+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
10+
<meta content="phpdocumentor/guides" name="generator">
11+
<meta content="" name="docsearch:name">
12+
<meta content="" name="docsearch:package_type">
13+
<meta content="" name="docsearch:release">
14+
<meta content="" name="docsearch:version">
15+
<meta content="2023-01-01T12:00:00+00:00" name="docsearch:modified">
16+
<meta content="2023-01-01T12:00:00+00:00" name="dc.modified">
17+
<meta content="2023-01-01T12:00:00+00:00" property="article:modified_time">
18+
<link href="http://purl.org/dc/elements/1.1/" rel="schema.dc">
19+
<link href="_resources/css/theme.css" rel="stylesheet">
20+
<link href="https://docs.typo3.org/search/" rel="search" title="Search">
21+
<script src="https://cdn.typo3.com/typo3infrastructure/universe/dist/webcomponents-loader.js"></script>
22+
<script src="https://cdn.typo3.com/typo3infrastructure/universe/dist/typo3-universe.js" type="module"></script>
23+
<link href="#" rel="top" title="Float Tests"/>
24+
</head>
25+
<body>
26+
<div class="page">
27+
<header>
28+
<div class="page-topbar">
29+
<div class="page-topbar-inner">
30+
<typo3-universe active="documentation">
31+
<div style="display: block; height: 44px; background-color: #313131;"></div>
32+
</typo3-universe>
33+
</div>
34+
</div>
35+
<div class="page-header">
36+
<div class="page-header-inner">
37+
<div class="d-flex flex-wrap">
38+
<div class="logo-wrapper">
39+
<a class="logo" href="https://docs.typo3.org/" title="TYPO3 Documentation">
40+
<img alt="TYPO3 Logo" class="logo-image" src="_resources/img/typo3-logo.svg" width="484" height="130">
41+
</a>
42+
</div>
43+
<div class="align-self-center order-lg-2 order-last">
44+
45+
<div class="toc-header">
46+
<div class="toc-title pe-3">
47+
<a class="toc-title-project" href="#">Float Tests</a>
48+
</div>
49+
</div> </div>
50+
<div class="ms-auto order-lg-3 d-flex">
51+
<div class="menu-search-wrapper">
52+
<button id="toc-toggle" class="btn btn-light d-block d-lg-none" tabindex="0" aria-controls="toc-collapse" aria-expanded="false">
53+
<i class="fas fa-bars"></i> <span class="visually-hidden">Mobile Menu</span>
54+
</button>
55+
<all-documentations-menu data-override-url="_resources/js/menu-proxy.php"></all-documentations-menu>
56+
<search role="search">
57+
<form action="https://docs.typo3.org/search/search" id="global-search-form" method="get">
58+
<div class="sr-only"><label for="globalsearchinput">TYPO3 documentation...</label></div>
59+
<div class="input-group mb-3 mt-sm-3">
60+
<select class="form-select search__scope" id="searchscope" name="scope">
61+
<option value="">Search all</option>
62+
</select>
63+
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="TYPO3 documentation..." type="text" value="">
64+
<button class="btn btn-light" type="submit"><i class="fa fa-search"></i>&nbsp;<span class="d-none d-md-inline">Search</span></button>
65+
</div>
66+
</form>
67+
<div id="global-search-root"></div>
68+
</search>
69+
<div class="position-relative d-inline-block">
70+
<button id="options-toggle" class="btn btn-light d-block" type="button" aria-expanded="false">
71+
<i class="fas fa-cog"></i> <span class="visually-hidden">Options</span>
72+
</button>
73+
74+
<div id="options-panel"
75+
class="shadow p-3"
76+
role="menu"
77+
aria-hidden="true">
78+
<h6 class="dropdown-header text-muted text-uppercase small mb-2">Options</h6>
79+
80+
<a class="dropdown-item d-flex align-items-center gap-2" href="_sources/index.rst.txt" rel="nofollow noopener" target="_blank">
81+
<i class="fas fa-code"></i>
82+
View source
83+
</a>
84+
<a class="dropdown-item d-flex align-items-center gap-2" href="https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocsOfficial/GithubMethod.html" id="btnHowToEdit" rel="nofollow noopener" target="_blank">
85+
<i class="fas fa-info-circle"></i>
86+
How to edit
87+
</a>
88+
<a class="dropdown-item d-flex align-items-center gap-2" href="singlehtml/Index.html" target="_blank" rel="noopener">
89+
<i class="fas fa-print"></i>
90+
Full documentation (single file)
91+
</a>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</header> <main class="page-main">
100+
<div class="page-main-inner">
101+
<div class="page-main-navigation">
102+
<nav>
103+
104+
<div id="toc-collapse">
105+
<div aria-label="main navigation" class="toc"
106+
role="navigation">
107+
<all-documentations-menu-mobile
108+
data-override-url="_resources/js/menu-proxy.php"></all-documentations-menu-mobile>
109+
<div aria-label="Main navigation" class="main_menu" role="navigation">
110+
<p class="caption">Float Tests</p>
111+
112+
</div>
113+
</div>
114+
</div>
115+
</nav>
116+
</div>
117+
<div class="page-main-content">
118+
<div class="rst-content"> <nav aria-label="breadcrumbs navigation" class="breadcrumb-bar" role="navigation">
119+
120+
<ol class="breadcrumb">
121+
<li aria-current="page" class="breadcrumb-item active">Float Tests</li>
122+
</ol>
123+
<div class="breadcrumb-additions"></div>
124+
</nav>
125+
126+
<article class="document" itemscope="itemscope" itemtype="http://schema.org/Article" role="main">
127+
<div itemprop="articleBody">
128+
<!-- content start -->
129+
<section class="section" id="float-tests">
130+
<h1>Float Tests<a class="headerlink" href="#float-tests" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h1>
131+
<section class="section" id="align-left">
132+
<h2>Align Left<a class="headerlink" href="#align-left" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
133+
<figure class="float-start">
134+
<img
135+
src="typo3-logo.png"
136+
alt="Left figure" />
137+
138+
139+
<figcaption>
140+
<p>Left aligned figure</p>
141+
</figcaption>
142+
</figure>
143+
</section>
144+
<section class="section" id="align-right">
145+
<h2>Align Right<a class="headerlink" href="#align-right" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
146+
<figure class="float-end">
147+
<img
148+
src="typo3-logo.png"
149+
alt="Right figure" />
150+
151+
152+
<figcaption>
153+
<p>Right aligned figure</p>
154+
</figcaption>
155+
</figure>
156+
</section>
157+
<section class="section" id="align-center">
158+
<h2>Align Center<a class="headerlink" href="#align-center" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
159+
<figure class="align-center">
160+
<img
161+
src="typo3-logo.png"
162+
alt="Center figure" />
163+
164+
165+
<figcaption>
166+
<p>Center aligned figure</p>
167+
</figcaption>
168+
</figure>
169+
</section>
170+
<section class="section" id="legacy-figure-class">
171+
<h2>Legacy Figure Class<a class="headerlink" href="#legacy-figure-class" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
172+
<figure class="float-start">
173+
<img
174+
src="typo3-logo.png"
175+
alt="Legacy float-left figure" />
176+
177+
178+
<figcaption>
179+
<p>Should rewrite to float-start</p>
180+
</figcaption>
181+
</figure>
182+
</section>
183+
<section class="section" id="legacy-figure-right">
184+
<h2>Legacy Figure Right<a class="headerlink" href="#legacy-figure-right" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
185+
<figure class="float-end">
186+
<img
187+
src="typo3-logo.png"
188+
alt="Legacy float-right figure" />
189+
190+
191+
<figcaption>
192+
<p>Should rewrite to float-end</p>
193+
</figcaption>
194+
</figure>
195+
</section>
196+
<section class="section" id="legacy-image-left">
197+
<h2>Legacy Image Left<a class="headerlink" href="#legacy-image-left" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
198+
<img
199+
src="typo3-logo.png"
200+
alt="Legacy float-left image" class="float-start"/>
201+
</section>
202+
<section class="section" id="legacy-image-right">
203+
<h2>Legacy Image Right<a class="headerlink" href="#legacy-image-right" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
204+
<img
205+
src="typo3-logo.png"
206+
alt="Legacy float-right image" class="float-end"/>
207+
</section>
208+
<section class="section" id="mixed-legacy-with-extra-class">
209+
<h2>Mixed Legacy With Extra Class<a class="headerlink" href="#mixed-legacy-with-extra-class" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
210+
<figure class="float-start with-shadow">
211+
<img
212+
src="typo3-logo.png"
213+
alt="Mixed class figure" />
214+
215+
216+
<figcaption>
217+
<p>Should rewrite float-left but keep with-shadow</p>
218+
</figcaption>
219+
</figure>
220+
</section>
221+
<section class="section" id="align-plus-legacy-class">
222+
<h2>Align Plus Legacy Class<a class="headerlink" href="#align-plus-legacy-class" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
223+
<figure class="float-start float-start">
224+
<img
225+
src="typo3-logo.png"
226+
alt="Both align and legacy class" />
227+
228+
229+
<figcaption>
230+
<p>Should use align, class gets rewritten to float-start</p>
231+
</figcaption>
232+
</figure>
233+
</section>
234+
<section class="section" id="image-align-left">
235+
<h2>Image Align Left<a class="headerlink" href="#image-align-left" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
236+
<img
237+
src="typo3-logo.png"
238+
alt="Image align left" class="float-start"/>
239+
</section>
240+
<section class="section" id="image-align-right">
241+
<h2>Image Align Right<a class="headerlink" href="#image-align-right" data-bs-toggle="modal" data-bs-target="#linkReferenceModal" title="Reference this headline">&nbsp;<i class="fa-solid fa-link"></i></a></h2>
242+
<img
243+
src="typo3-logo.png"
244+
alt="Image align right" class="float-end"/>
245+
</section>
246+
</section>
247+
<!-- content end -->
248+
</div>
249+
</article>
250+
251+
</div>
252+
</div>
253+
</div>
254+
</main>
255+
256+
<div class="modal fade" id="linkReferenceModal" tabindex="-1" aria-labelledby="linkReferenceModalLabel"
257+
aria-hidden="true" data-current-filename="index">
258+
<div class="modal-dialog">
259+
<div class="modal-content">
260+
<div class="modal-header">
261+
<h5 class="modal-title" id="linkReferenceModalLabel">Reference to the headline</h5>
262+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
263+
</div>
264+
<div class="modal-body">
265+
<div class="alert alert-success d-none" id="permalink-alert-success" role="alert"></div>
266+
<div class="mb-3">
267+
<div class="permalink-short-wrapper">
268+
<label for="permalink-short" class="col-form-label">Permalink (Shortlink)</label>
269+
<div class="input-group">
270+
<input class="form-control code" id="permalink-short" readonly>
271+
<button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-short"><i class="far fa-clone"></i></button>
272+
</div>
273+
<p><em>Copy and freely share the link</em></p>
274+
</div>
275+
<label for="permalink-uri" class="col-form-label">URL</label>
276+
<div class="input-group">
277+
<input class="form-control code" id="permalink-uri" readonly>
278+
<button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-uri"><i class="far fa-clone"></i></button>
279+
</div>
280+
</div>
281+
<div class="mb-3">
282+
<div class="alert alert-warning alert-permalink-rst" role="alert">This link target has no permanent anchor assigned.The link below can be used, but is prone to change if the page gets moved.
283+
</div>
284+
<label for="permalink-rst" class="col-form-label">Link in reStructuredText (reST)</label>
285+
<div class="input-group">
286+
<textarea class="form-control code" id="permalink-rst" readonly></textarea>
287+
<button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-rst"><i class="far fa-clone"></i></button>
288+
</div>
289+
<p><em>Copy this link into your TYPO3 manual.</em></p>
290+
</div>
291+
<div class="mb-3">
292+
<label for="permalink-md" class="col-form-label">Link in Markdown</label>
293+
<div class="input-group">
294+
<textarea class="form-control code" id="permalink-md" readonly></textarea>
295+
<button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-md"><i class="far fa-clone"></i></button>
296+
</div>
297+
</div>
298+
<div class="mb-3">
299+
<label for="permalink-html" class="col-form-label">Link in HTML</label>
300+
<div class="input-group">
301+
<textarea class="form-control code" id="permalink-html" readonly></textarea>
302+
<button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-html"><i class="far fa-clone"></i></button>
303+
</div>
304+
</div>
305+
</div>
306+
<div class="modal-footer">
307+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
308+
</div>
309+
</div>
310+
</div>
311+
</div> <div class="modal fade" id="generalModal" tabindex="-1" aria-labelledby="linkReferenceModalLabel"
312+
aria-hidden="true" data-current-filename="index"
313+
>
314+
<div class="modal-dialog">
315+
<div class="modal-content">
316+
<div class="modal-header">
317+
<h5 class="modal-title" id="generalModalLabel"></h5>
318+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
319+
</div>
320+
<div class="modal-body">
321+
<div class="alert alert-success d-none" id="general-alert-success" role="alert"></div>
322+
<div id="generalModalContent">
323+
</div>
324+
</div>
325+
<div class="modal-footer justify-content-between">
326+
<div id="generalModalCustomButtons"></div>
327+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fa-regular fa-circle-xmark"></i>&nbsp;Close</button>
328+
</div>
329+
</div>
330+
</div>
331+
</div></div>
332+
333+
334+
<footer class="page-footer">
335+
<div class="frame frame-ruler-before frame-background-dark">
336+
<div class="frame-container">
337+
<div class="frame-inner">
338+
<div class="footer-additional">
339+
<p class="text-center">Last rendered: Jan 01, 2023 12:00</p>
340+
</div>
341+
<div class="footer-meta">
342+
<ul class="footer-meta-navigation">
343+
<li><a href="https://typo3.org/legal-notice" rel="nofollow" target="_blank" title="Legal Notice">Legal Notice</a></li>
344+
<li><a href="https://typo3.org/privacy-policy" rel="nofollow" target="_blank" title="Privacy Policy">Privacy Policy</a></li>
345+
</ul>
346+
</div>
347+
</div>
348+
</div>
349+
</div>
350+
</footer>
351+
<script src="_resources/js/popper.min.js"></script>
352+
<script src="_resources/js/bootstrap.min.js"></script>
353+
<script src="_resources/js/theme.min.js"></script>
354+
355+
<!--
356+
Locally rendered. No tracking embedded.
357+
-->
358+
</body>
359+
</html>

0 commit comments

Comments
 (0)