diff --git a/Tools/ChangeLog b/Tools/ChangeLog
index 43f9ab3..0925898 100644
--- a/Tools/ChangeLog
+++ b/Tools/ChangeLog
@@ -1,3 +1,34 @@
+2019-10-21  Zhifei Fang  <zhifei_fang@apple.com>
+
+        [results.webkit.org] Change dot and lengend dot use same mechanism to center text and image
+        https://bugs.webkit.org/show_bug.cgi?id=203216
+
+        Reviewed by Jonathan Bedard.
+
+        * resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml:
+        * resultsdbpy/resultsdbpy/view/static/library/css/index.html:
+        * resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:
+        (.dot *):
+        (.dot img, .dot .text):
+        (.dot>img, .dot>.text):
+        (.dot.small img, .dot.small .text):
+        (.dot.small>img, .dot.small>.text):
+        (.dot.medium img, .dot.medium .text):
+        (.dot.medium>img, .dot.medium>.text):
+        (.dot.large img, .dot.large .text):
+        (.dot.large>img, .dot.large>.text):
+        (.lengend>.item .dot):
+        (.lengend>.item .dot img, .lengend>.item .dot .text):
+        (.lengend>.item .dot>img, .lengend>.item .dot>.text):
+        (.dot.small *): Deleted.
+        (.dot img, .dot.small img): Deleted.
+        (.dot.medium *): Deleted.
+        (.dot.medium img): Deleted.
+        (.dot.large *): Deleted.
+        (.dot.large img): Deleted.
+        (.lengend>.item .dot .text): Deleted.
+        (.lengend>.item .dot img): Deleted.
+
 2019-10-21  youenn fablet  <youenn@apple.com>
 
         Move service worker registration matching for navigation loads to network process
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml
index d63f5d1..9e007d1 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml
+++ b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml
@@ -754,22 +754,28 @@
                         With string inside
                     html: |-
                         <div class="dot success">
-                            <div>&#10003</div>
+                            <div class="text">&#10003</div>
                         </div>
                         <div class="dot failed">
-                            <div>&#10005</div>
+                            <div class="text">&#120247</div>
                         </div>
                         <div class="dot error">
-                            <div>!</div>
+                            <div class="text">!</div>
                         </div>
                         <div class="dot success large">
-                            <div>&#10003</div>
+                            <div class="text">&#10003</div>
                         </div>
                         <div class="dot failed large">
-                            <div>&#10005</div>
+                            <div class="text">&#120247</div>
                         </div>
                         <div class="dot error large">
-                            <div>!</div>
+                            <div class="text">!</div>
+                        </div>
+                -
+                    description: With image inside
+                    html: |-
+                        <div class="dot error">
+                            <img src="../icons/clock.svg">
                         </div>
                 -
                     description: Blink
@@ -1415,7 +1421,7 @@
                                 <div class="label">Tests Failed</div>
                             </div>
                             <div class="item">
-                                <div class="dot error"></div>
+                                <div class="dot error"><img src="../icons/clock.svg"></div>
                                 <div class="label">Tests have error</div>
                             </div>
                         </div>
@@ -1434,7 +1440,7 @@
                                 <div class="label">Tests Failed</div>
                             </div>
                             <div class="item">
-                                <div class="dot error"></div>
+                                <div class="dot error"><img src="../icons/clock.svg"></div>
                                 <div class="label">Tests have error</div>
                             </div>
                         </div>
@@ -1453,7 +1459,7 @@
                                 <div class="label">Tests Failed</div>
                             </div>
                             <div class="item">
-                                <div class="dot error"></div>
+                                <div class="dot error"><img src="../icons/clock.svg"></div>
                                 <div class="label">Tests have error</div>
                             </div>
                         </div>
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html
index 84cea97..d377a9f 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html
+++ b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html
@@ -1777,42 +1777,58 @@
                         
                         <div class="content">
                             <pre><xmp><div class="dot success">
-    <div>&#10003</div>
+    <div class="text">&#10003</div>
 </div>
 <div class="dot failed">
-    <div>&#10005</div>
+    <div class="text">&#120247</div>
 </div>
 <div class="dot error">
-    <div>!</div>
+    <div class="text">!</div>
 </div>
 <div class="dot success large">
-    <div>&#10003</div>
+    <div class="text">&#10003</div>
 </div>
 <div class="dot failed large">
-    <div>&#10005</div>
+    <div class="text">&#120247</div>
 </div>
 <div class="dot error large">
-    <div>!</div>
+    <div class="text">!</div>
 </div></xmp></pre>
                         </div>
                         <div class="content">
                             <div class="dot success">
-    <div>&#10003</div>
+    <div class="text">&#10003</div>
 </div>
 <div class="dot failed">
-    <div>&#10005</div>
+    <div class="text">&#120247</div>
 </div>
 <div class="dot error">
-    <div>!</div>
+    <div class="text">!</div>
 </div>
 <div class="dot success large">
-    <div>&#10003</div>
+    <div class="text">&#10003</div>
 </div>
 <div class="dot failed large">
-    <div>&#10005</div>
+    <div class="text">&#120247</div>
 </div>
 <div class="dot error large">
-    <div>!</div>
+    <div class="text">!</div>
+</div>
+                        </div>
+                    
+                        
+                            <div class="content">
+                                With image inside
+                            </div>
+                        
+                        <div class="content">
+                            <pre><xmp><div class="dot error">
+    <img src="../icons/clock.svg">
+</div></xmp></pre>
+                        </div>
+                        <div class="content">
+                            <div class="dot error">
+    <img src="../icons/clock.svg">
 </div>
                         </div>
                     
@@ -3116,7 +3132,7 @@
         <div class="label">Tests Failed</div>
     </div>
     <div class="item">
-        <div class="dot error"></div>
+        <div class="dot error"><img src="../icons/clock.svg"></div>
         <div class="label">Tests have error</div>
     </div>
 </div></xmp></pre>
@@ -3134,7 +3150,7 @@
         <div class="label">Tests Failed</div>
     </div>
     <div class="item">
-        <div class="dot error"></div>
+        <div class="dot error"><img src="../icons/clock.svg"></div>
         <div class="label">Tests have error</div>
     </div>
 </div>
@@ -3158,7 +3174,7 @@
         <div class="label">Tests Failed</div>
     </div>
     <div class="item">
-        <div class="dot error"></div>
+        <div class="dot error"><img src="../icons/clock.svg"></div>
         <div class="label">Tests have error</div>
     </div>
 </div></xmp></pre>
@@ -3176,7 +3192,7 @@
         <div class="label">Tests Failed</div>
     </div>
     <div class="item">
-        <div class="dot error"></div>
+        <div class="dot error"><img src="../icons/clock.svg"></div>
         <div class="label">Tests have error</div>
     </div>
 </div>
@@ -3200,7 +3216,7 @@
         <div class="label">Tests Failed</div>
     </div>
     <div class="item">
-        <div class="dot error"></div>
+        <div class="dot error"><img src="../icons/clock.svg"></div>
         <div class="label">Tests have error</div>
     </div>
 </div></xmp></pre>
@@ -3218,7 +3234,7 @@
         <div class="label">Tests Failed</div>
     </div>
     <div class="item">
-        <div class="dot error"></div>
+        <div class="dot error"><img src="../icons/clock.svg"></div>
         <div class="label">Tests have error</div>
     </div>
 </div>
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css
index b7c4891..d5be10b 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css
+++ b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css
@@ -607,9 +607,30 @@
 }
 
 .dot * {
-  padding-top: 3px;
   color: var(--greyLightest);
-  line-height: 1.1;
+  line-height: 1;
+}
+
+.dot img, .dot .text {
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  cursor: default;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  vertical-align: middle;
+  font-weight: 400;
+  width: var(--smallSize);
+  height: var(--smallSize);
+  font-size: var(--smallSize);
+  display: block;
+}
+
+.dot>img, .dot>.text{
+  position: absolute;
+  top: calc((var(--mediumSize) - var(--smallSize)) / 2);
+  left: calc((var(--mediumSize) - var(--smallSize)) / 2);
 }
 
 .dot.tiny {
@@ -626,18 +647,16 @@
   border-radius: var(--smallSize);
 }
 
-.dot.small * {
-  margin-top: 1px;
-}
+.dot.small img, .dot.small .text {
+  width: var(--tinySize);
+  height: var(--tinySize);
+  font-size: var(--tinySize);
+} 
 
-.dot img, .dot.small img {
-    width: var(--tinySize);
-    height: var(--tinySize);
-    position: absolute;
-    top: calc((var(--smallSize) - var(--tinySize)) / 2);
-    left: calc((var(--smallSize) - var(--tinySize)) / 2);
-    padding: 0;
-    margin: 0;
+ .dot.small>img, .dot.small>.text {
+  position: absolute;
+  top: calc((var(--smallSize) - var(--tinySize)) / 2);
+  left: calc((var(--smallSize) - var(--tinySize)) / 2);
 }
 
 .dot.medium {
@@ -647,18 +666,16 @@
   border-radius: var(--mediumSize);
 }
 
-.dot.medium * {
-  padding-top: 3px;
+.dot.medium img, .dot.medium .text{
+  width: var(--smallSize);
+  height: var(--smallSize);
+  font-size: var(--smallSize)
 }
 
-.dot.medium img {
-    width: var(--smallSize);
-    height: var(--smallSize);
-    position: absolute;
-    top: calc((var(--mediumSize) - var(--smallSize)) / 2);
-    left: calc((var(--mediumSize) - var(--smallSize)) / 2);
-    padding: 0;
-    margin: 0;
+.dot.medium>img, .dot.medium>.text{
+  position: absolute;
+  top: calc((var(--mediumSize) - var(--smallSize)) / 2);
+  left: calc((var(--mediumSize) - var(--smallSize)) / 2);
 }
 
 .dot.large {
@@ -668,18 +685,16 @@
   border-radius: var(--largeSize);
 }
 
-.dot.large * {
-  padding-top: 4px;
+.dot.large img, .dot.large .text{
+  width: var(--mediumSize);
+  height: var(--mediumSize);
+  font-size: var(--mediumSize);
 }
 
-.dot.large img {
-    width: var(--mediumSize);
-    height: var(--mediumSize);
-    position: absolute;
-    top: calc((var(--largeSize) - var(--mediumSize)) / 2);
-    left: calc((var(--largeSize) - var(--mediumSize)) / 2);
-    padding: 0;
-    margin: 0;
+.dot.large>img, .dot.large>.text{
+  position: absolute;
+  top: calc((var(--largeSize) - var(--mediumSize)) / 2);
+  left: calc((var(--largeSize) - var(--mediumSize)) / 2);
 }
 
 .dot.success {
@@ -2175,7 +2190,7 @@
   height: var(--smallSize);
   border-radius: var(--smallSize);
   font-size: calc(var(--tinySize));
-  text-align: middle;
+  text-align: center;
   flex: none;
   vertical-align: middle;
   align-items: center;
@@ -2183,29 +2198,15 @@
   margin: 0 var(--tinySize);
   position: relative;
 }
-.lengend>.item .dot .text {
-  font-size: calc(var(--tinySize));
-  font-weight: 400;
-  text-align: center;
-  width: var(--smallSize);
-  height: var(--smallSize);
-  line-height: var(--smallSize);
-  padding: 0;
-  margin: 0;
-  display: inline-block;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
-  cursor: default;
-}
-.lengend>.item .dot img {
-    width: var(--tinySize);
-    height: var(--tinySize);
-    position: absolute;
-    top: calc((var(--smallSize) - var(--tinySize)) / 2);
-    left: calc((var(--smallSize) - var(--tinySize)) / 2);
-    padding: 0;
-    margin: 0;
+.lengend>.item .dot img, .lengend>.item .dot .text {
+  width: var(--tinySize);
+  height: var(--tinySize);
+  font-size: var(--tinySize);
+} 
+.lengend>.item .dot>img, .lengend>.item .dot>.text {
+  position: absolute;
+  top: calc((var(--smallSize) - var(--tinySize)) / 2);
+  left: calc((var(--smallSize) - var(--tinySize)) / 2);
 }
 .timeline.lengend>.item .dot::before{
   left: calc(0px - var(--tinySize));