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

theoludwig · web-flow · commit e0095faf2379 · 2022-01-31T19:13:46.000-05:00
## Bug - [x] Fixes #33809 - [x] Related to #33218 - [x] Integration tests added: Usage of [html-validator](https://www.npmjs.com/package/html-validator) to validate the HTML. - [x] Errors have helpful link attached, see `contributing.md` (N/A)
diff --git a/package.json b/package.json
@@ -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",
@@ -112,6 +113,7 @@
     "get-port": "5.1.1",
     "glob": "7.1.6",
     "gzip-size": "5.1.1",
+    "html-validator": "5.1.18",
     "image-size": "0.9.3",
     "is-animated": "2.0.0",
     "isomorphic-unfetch": "3.0.0",
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -605,8 +605,7 @@ export default function Image({
       wrapperStyle.maxWidth = '100%'
       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%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27${widthInt}%27%20height=%27${heightInt}%27/%3e`
     } else if (layout === 'fixed') {
       // <Image src="i.png" width="100" height="100" layout="fixed" />
       wrapperStyle.display = 'inline-block'
diff --git a/test/integration/image-component/default/pages/_document.js b/test/integration/image-component/default/pages/_document.js
@@ -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>
+  )
+}
diff --git a/test/integration/image-component/default/pages/valid-html-w3c.js b/test/integration/image-component/default/pages/valid-html-w3c.js
@@ -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>
+
+      <main>
+        <Image src="/test.jpg" width="400" height="400" alt="basic image" />
+      </main>
+    </div>
+  )
+}
+
+export default Page
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -1,6 +1,7 @@
 /* eslint-env jest */
 
 import cheerio from 'cheerio'
+import validateHTML from 'html-validator'
 import {
   check,
   findPort,
@@ -1039,6 +1040,26 @@ function runTests(mode) {
       }
     }
   })
+
+  it('should be valid W3C HTML', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/valid-html-w3c')
+      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', () => {
diff --git a/yarn.lock b/yarn.lock
