فهرست منبع

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 سال پیش
والد
کامیت
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 {
-  if (typeof value === 'string') {
+  if (
+    typeof value === 'string' ||
+    (typeof value === 'number' && noUnitNumericStyleProps[key])
+  ) {
     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 {
     // invalid values
     return ``

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

@@ -1528,14 +1528,14 @@ describe('SSR: renderToString', () => {
       template: '<div :style="style"></div>',
       data: {
         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 => {
       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()
     })