Просмотр исходного кода

fix(ssr): should not render invalid numeric style values

Reverts part of 7d9cfebe - browsers only auto append units to
numbers when in quirksmode, so in standard mode, numbers set to
style properties that require units are invalid and should not
be rendered.
Evan You 7 лет назад
Родитель
Сommit
17d8bcb60e
2 измененных файлов с 8 добавлено и 15 удалено
  1. 4 11
      src/platforms/web/server/modules/style.js
  2. 4 4
      test/ssr/ssr-string.spec.js

+ 4 - 11
src/platforms/web/server/modules/style.js

@@ -21,18 +21,11 @@ export function genStyle (style: Object): string {
 }
 }
 
 
 function normalizeValue(key: string, value: any): string {
 function normalizeValue(key: string, value: any): string {
-  if (typeof value === 'string') {
+  if (
+    typeof value === 'string' ||
+    (typeof value === 'number' && noUnitNumericStyleProps[key])
+  ) {
     return `${key}:${value};`
     return `${key}:${value};`
-  } else if (typeof value === 'number') {
-    // Handle numeric values.
-    // Turns out all evergreen browsers plus IE11 already support setting plain
-    // numbers on the style object and will automatically convert it to px if
-    // applicable, so we should support that on the server too.
-    if (noUnitNumericStyleProps[key]) {
-      return `${key}:${value};`
-    } else {
-      return `${key}:${value}px;`
-    }
   } else {
   } else {
     // invalid values
     // invalid values
     return ``
     return ``

+ 4 - 4
test/ssr/ssr-string.spec.js

@@ -1528,14 +1528,14 @@ describe('SSR: renderToString', () => {
       template: '<div :style="style"></div>',
       template: '<div :style="style"></div>',
       data: {
       data: {
         style: {
         style: {
-          opacity: 0, // opacity should display as-is
-          top: 0, // top and margin should be converted to '0px'
-          marginTop: 10
+          opacity: 0, // valid, opacity is unit-less
+          top: 0, // invalid, top requires unit
+          marginTop: '10px' // valid
         }
         }
       }
       }
     }, result => {
     }, result => {
       expect(result).toContain(
       expect(result).toContain(
-        '<div data-server-rendered="true" style="opacity:0;top:0px;margin-top:10px;"></div>'
+        '<div data-server-rendered="true" style="opacity:0;margin-top:10px;"></div>'
       )
       )
       done()
       done()
     })
     })