Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(next/image): render valid html according to W3C #33825

Merged
merged 11 commits into from
Feb 1, 2022
Merged

fix(next/image): render valid html according to W3C #33825

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e4151df
test(next/image): render valid HTML according to W3C
theoludwig Jan 31, 2022
2fe8dac
fix(next/image): render valid HTML according to W3C
theoludwig Jan 31, 2022
0effe96
build(deps): bump html-validator from v6 to v5
theoludwig Jan 31, 2022
1aa3e6e
refactor: move valid-html-w3c test to default
theoludwig Jan 31, 2022
f9967df
test: typo
theoludwig Jan 31, 2022
d0303d7
Revert "use text data url instead of base64 for shorter encoding (#33…
theoludwig Jan 31, 2022
4e011b3
build(deps): usage of v5.1.18 instead of only v5 for html-validator
theoludwig Jan 31, 2022
b0fac27
Merge branch 'canary' into fix/next-image-render-valid-html-w3c
styfle Jan 31, 2022
88caadb
Replace space with %20
styfle Jan 31, 2022
a8e8a67
Remove toBase64
styfle Jan 31, 2022
2a03501
Merge branch 'canary' into fix/next-image-render-valid-html-w3c
styfle Jan 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
"@testing-library/react": "11.2.5",
"@types/cheerio": "0.22.16",
"@types/fs-extra": "8.1.0",
"@types/html-validator": "5.0.2",
"@types/http-proxy": "1.17.3",
"@types/jest": "24.0.13",
"@types/node": "13.11.0",
Expand Down Expand Up @@ -112,6 +113,7 @@
"get-port": "5.1.1",
"glob": "7.1.6",
"gzip-size": "5.1.1",
"html-validator": "5",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason this isn't using the latest version, 6?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, v6 dropped support for Node.js v12 (ref: zrrrzzt/html-validator@c3a11fa), hence failing the test using Node.js v12.
But Next.js support Node.js >= 12.22.0.

But yes instead to use 5, we could use 5.1.18. 👍

"image-size": "0.9.3",
"is-animated": "2.0.0",
"isomorphic-unfetch": "3.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/next/client/image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -606,7 +606,7 @@ export default function Image({
hasSizer = true
sizerStyle.maxWidth = '100%'
// url encoded svg is a little bit shorten than base64 encoding
sizerSvgUrl = `data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 width=%27${widthInt}%27 height=%27${heightInt}%27/%3e`
sizerSvgUrl = `data:image/svg+xml,%3csvg+xmlns=%27http://www.w3.org/2000/svg%27+version=%271.1%27+width=%27${widthInt}%27+height=%27${heightInt}%27/%3e`
} else if (layout === 'fixed') {
// <Image src="i.png" width="100" height="100" layout="fixed" />
wrapperStyle.display = 'inline-block'
Expand Down
13 changes: 13 additions & 0 deletions test/integration/image-component/default/pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
20 changes: 20 additions & 0 deletions test/integration/image-component/default/pages/valid-html-w3c.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Head from 'next/head'
import Image from 'next/image'

const Page = () => {
return (
<div>
<Head>
<title>Title</title>
<meta name="description" content="Description..." />
<link rel="icon" type="image/jpeg" href="/test.jpg" />
</Head>
styfle marked this conversation as resolved.
Show resolved Hide resolved

<main>
<Image src="/test.jpg" width="400" height="400" alt="basic image" />
</main>
</div>
)
}

export default Page
21 changes: 21 additions & 0 deletions test/integration/image-component/default/test/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-env jest */

import cheerio from 'cheerio'
import validateHTML from 'html-validator'
import {
check,
findPort,
Expand Down Expand Up @@ -1039,6 +1040,26 @@ function runTests(mode) {
}
}
})

it('should be vaild W3C HTML', async () => {
theoludwig marked this conversation as resolved.
Show resolved Hide resolved
let browser
try {
browser = await webdriver(appPort, '/valid-html-w3c')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets loop through every page here to ensure all usages of the image component are valid HTML

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will try but that requires a lot of changes to these pages because a lot of them are not valid W3C because of all kinds of errors like duplicated IDs etc. And I feel like it's unrelated to this PR.

Testing only with the /valid-html-w3c page keeps things simple and only test what is really needed.
Will keep you updated! 👍

await waitFor(1000)
expect(await browser.hasElementByCssSelector('img')).toBeTruthy()
const url = await browser.url()
const result = await validateHTML({
url,
format: 'json',
isLocal: true,
})
expect(result.messages).toEqual([])
} finally {
if (browser) {
await browser.close()
}
}
})
}

describe('Image Component Tests', () => {
Expand Down
Loading