Skip to content

Commit a1eaef5

Browse files
DK-SternDK-Stern
authored
Fix for issue #1302: "SSR: Duplicated ids in rendered markup, if there are nodes with attributes 'media', 'heights' or 'sizes'" (#1303)
* fix duplicated ids * Added transformation test and refactored fix. * Adjusted input.html of transformation test with more realistic example
1 parent 26e113b commit a1eaef5

File tree

3 files changed

+30
-0
lines changed

3 files changed

+30
-0
lines changed

‎packages/optimizer/lib/transformers/ApplyCommonAttributes.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,7 @@ class ApplyCommonAttributes {
219219
}
220220
if (nodeHasBeenTransformed) {
221221
node.attribs.id = id;
222+
this.ids.add(id);
222223
} else {
223224
this.transformedNodesCounter--;
224225
}

‎packages/optimizer/spec/transformers/valid/ServerSideRendering/generates_unique_ids_for_items_with_media_and_ignores_items_with_own_id/expected_output.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate>
3+
<head><style amp-runtime></style>
4+
<script data-rh async src="https://cdn.ampproject.org/v0.js"></script>
5+
<style amp-custom>@media not all and (min-width: 0px) and (max-width: 50px){#i-amp-0{display:none}}@media not all and (min-width: 51px) and (max-width: 129px){#i-amp-1{display:none}}</style>
6+
</head>
7+
<body>
8+
<amp-img height="100" width="100" layout="responsive" src="img1.png" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive" id="i-amp-0">
9+
<i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer>
10+
</amp-img>
11+
<amp-img id="customId" height="100" width="100" layout="responsive" src="img2.png" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
12+
<i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer>
13+
</amp-img>
14+
<amp-img height="100" width="100" layout="responsive" src="img3.png" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive" id="i-amp-1">
15+
<i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer>
16+
</amp-img>
17+
</body>
18+
</html>

‎packages/optimizer/spec/transformers/valid/ServerSideRendering/generates_unique_ids_for_items_with_media_and_ignores_items_with_own_id/input.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html ⚡>
3+
<head>
4+
<script data-rh="" async="" src="https://cdn.ampproject.org/v0.js"></script>
5+
</head>
6+
<body>
7+
<amp-img media="(min-width: 0px) and (max-width: 50px)" height="100" width="100" layout="responsive" src="img1.png"></amp-img>
8+
<amp-img id="customId" height="100" width="100" layout="responsive" src="img2.png"></amp-img>
9+
<amp-img media="(min-width: 51px) and (max-width: 129px)" height="100" width="100" layout="responsive" src="img3.png"></amp-img>
10+
</body>
11+
</html>

0 commit comments

Comments
 (0)