185675 2018-05-16 01:11:10 -0700 Canvas text with middle baseline alignment does not match vertically centered table cell text in certain languages 2018-07-05 10:13:09 -0700 1 1 1 Unclassified WebKit Canvas WebKit Nightly Build Unspecified Unspecified NEW InRadar P2 Normal --- 1 jonlee webkit-unassigned dino mmaxfield simon.fraser webkit-bug-importer zalan oldest_to_newest 1424263 0 340475 jonlee 2018-05-16 01:11:10 -0700 Created attachment 340475 Test See test page. For each section I have a table cell that covers the full colored div. In the cell is vertically centered text. On top of the cell is a canvas that covers the full colored div. I render the same text with textAlign center and textBaseline middle. The text animates side to side to show alignment. For English, Cyrillic, Chinese, Japanese, Hebrew and Tamil, the alignment is pretty spot on. For Korean and Tamil, the alignment is off by at most one point. For Arabic, the alignment is off by more than one point. 1424264 1 webkit-bug-importer 2018-05-16 01:11:59 -0700 <rdar://problem/40287413> 1439430 2 jonlee 2018-07-05 10:13:09 -0700 FWIW, Chrome and Firefox also do not align perfectly on all languages either, but which languages differ and how they differ are not the same as Safari. 340475 2018-05-16 01:11:10 -0700 2018-05-16 01:11:10 -0700 Test test.html text/html 2717 jonlee PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KPHN0 eWxlPgpkaXYgewoJcG9zaXRpb246IHJlbGF0aXZlOwoJd2lkdGg6IDMwMHB4OwoJaGVpZ2h0OiAy MDBweDsKfQoKY2FudmFzIHsKCXBvc2l0aW9uOiBhYnNvbHV0ZTsKCWxlZnQ6IDA7Cgl0b3A6IDA7 Cgl3aWR0aDogMTAwJTsKCWhlaWdodDogMTAwJTsKfQoKdGFibGUgewoJcG9zaXRpb246IHJlbGF0 aXZlOwoJd2lkdGg6IDEwMCU7CgloZWlnaHQ6IDEwMCU7Cglmb250OiA1MnB4IEhlbHZldGljYTsK CXRleHQtYWxpZ246IGNlbnRlcjsKCWNvbG9yOiBncmVlbjsKfQo8L3N0eWxlPgo8L2hlYWQ+Cjxi b2R5Pgo8aDE+UGljayBhIGxhbmd1YWdlPC9oMT4KPGZvcm0+Cgk8bGFiZWw+PGlucHV0IHR5cGU9 InJhZGlvIiBuYW1lPSJsYW5ndWFnZSIgdmFsdWU9IjAiPkVuZ2xpc2g8L2xhYmVsPjxici8+Cgk8 bGFiZWw+PGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJsYW5ndWFnZSIgdmFsdWU9IjEiPkN5cmls bGljPC9sYWJlbD48YnIvPgoJPGxhYmVsPjxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0ibGFuZ3Vh Z2UiIHZhbHVlPSIyIj5Lb3JlYW48L2xhYmVsPjxici8+Cgk8bGFiZWw+PGlucHV0IHR5cGU9InJh ZGlvIiBuYW1lPSJsYW5ndWFnZSIgdmFsdWU9IjMiPkNoaW5lc2U8L2xhYmVsPjxici8+Cgk8bGFi ZWw+PGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJsYW5ndWFnZSIgdmFsdWU9IjQiPkphcGFuZXNl PC9sYWJlbD48YnIvPgoJPGxhYmVsPjxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0ibGFuZ3VhZ2Ui IHZhbHVlPSI1Ij5IZWJyZXc8L2xhYmVsPjxici8+Cgk8bGFiZWw+PGlucHV0IHR5cGU9InJhZGlv IiBuYW1lPSJsYW5ndWFnZSIgdmFsdWU9IjYiPkFyYWJpYzwvbGFiZWw+PGJyLz4KCTxsYWJlbD48 aW5wdXQgdHlwZT0icmFkaW8iIG5hbWU9Imxhbmd1YWdlIiB2YWx1ZT0iNyI+VGFtaWw8L2xhYmVs Pjxici8+CjwvZm9ybT4KCjxoMj4xeDwvaDI+CjxkaXYgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6 cGluayI+Cgk8dGFibGU+PHRyPjx0ZD7QtNC40LfQsNC50L08L3RkPjwvdHI+PC90YWJsZT4KCTxj YW52YXMgaWQ9ImEiPjwvY2FudmFzPgo8L2Rpdj4KPGgyPjJ4PC9oMj4KPGRpdiBzdHlsZT0iYmFj a2dyb3VuZC1jb2xvcjpsaWdodGJsdWUiPgoJPHRhYmxlPjx0cj48dGQ+0LTQuNC30LDQudC9PC90 ZD48L3RyPjwvdGFibGU+Cgk8Y2FudmFzIGlkPSJiIj48L2NhbnZhcz4KPC9kaXY+Cgo8c2NyaXB0 Pgp3ID0gMzAwOwpoID0gMjAwOwoKWyJhIiwgImIiXS5mb3JFYWNoKGZ1bmN0aW9uKGlkKSB7Cgl2 YXIgY2FudmFzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoaWQpOwoJdmFyIGNvbnRleHQgPSB3 aW5kb3dbaWRdID0gY2FudmFzLmdldENvbnRleHQoIjJkIik7CgoJaWYgKGlkID09ICJiIikgewoJ CWNhbnZhcy53aWR0aCA9IHcgKiB3aW5kb3cuZGV2aWNlUGl4ZWxSYXRpbzsKCQljYW52YXMuaGVp Z2h0ID0gaCAqIHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvOwoJCWNvbnRleHQuc2NhbGUod2luZG93 LmRldmljZVBpeGVsUmF0aW8sIHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvKTsKCX0gZWxzZSB7CgkJ Y2FudmFzLndpZHRoID0gdzsKCQljYW52YXMuaGVpZ2h0ID0gaDsKCX0KCiAgICBjYW52YXMuc3R5 bGUud2lkdGggPSB3ICsgInB4IjsKICAgIGNhbnZhcy5zdHlsZS5oZWlnaHQgPSBoICsgInB4IjsK Cgljb250ZXh0LmZvbnQgPSAiNTJweCBIZWx2ZXRpY2EiOwoJY29udGV4dC50ZXh0QWxpZ24gPSAi Y2VudGVyIjsKCWNvbnRleHQudGV4dEJhc2VsaW5lID0gIm1pZGRsZSI7Cgljb250ZXh0LmZpbGxT dHlsZSA9ICJ3aGl0ZSI7Cn0pOwoKZnVuY3Rpb24gYW5pbWF0ZSgpIHsKCVthLCBiXS5mb3JFYWNo KGZ1bmN0aW9uKGNvbnRleHQpIHsKICAgICAgICB2YXIgYW5nbGUgPSBEYXRlLm5vdygpIC8gNjEy OwoKICAgICAgICBjb250ZXh0LmNsZWFyUmVjdCgwLCAwLCB3LCBoKTsKCiAgICAgICAgdmFyIHN0 ZXBYID0gTWF0aC5zaW4oYW5nbGUpICogMS41OwogICAgICAgIHZhciB4ID0gLXN0ZXBYICogMjsK ICAgICAgICBjb250ZXh0LmZpbGxUZXh0KHJlbmRlclN0cmluZywgTWF0aC5mbG9vcih3LzIgKyB4 KSwgaC8yKTsKCX0pOwoJcmVxdWVzdEFuaW1hdGlvbkZyYW1lKGFuaW1hdGUpOwp9CgoKcmVxdWVz dEFuaW1hdGlvbkZyYW1lKGFuaW1hdGUpOwoKdmFyIHN0cmluZ3MgPSBbCgkiZW5nbGlzaCIsCgki 0LTQuNC30LDQudC9IiwKCSLrlJTsnpDsnbgiLAoJIuiuvuiuoSIsCiAgICAi44OH44K244Kk44Oz IiwKICAgICLXnNaw16LWt9em1rXXkSIsCgki2KrYtdmF2YrZhSIsCgki4K614K6f4K6/4K614K6u 4K+I4K6q4K+N4K6q4K+BIgpdCndpbmRvdy5vbmNoYW5nZSA9IGZ1bmN0aW9uKGUpIHsKCXZhciBl bGVtZW50cyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoInRkIik7CglyZW5kZXJTdHJpbmcg PSBzdHJpbmdzWytlLnRhcmdldC52YWx1ZV07Cglmb3IgKHZhciBpID0gMDsgaSA8IGVsZW1lbnRz Lmxlbmd0aDsgKytpKQoJCWVsZW1lbnRzW2ldLmlubmVyVGV4dCA9IHJlbmRlclN0cmluZzsKfQph YWEgPSBkb2N1bWVudC5mb3Jtc1swXS5sYW5ndWFnZVswXTsKYWFhLmNoZWNrZWQgPSB0cnVlOwpl ZWUgPSBuZXcgRXZlbnQoJ2NoYW5nZScsIHtidWJibGVzOiB0cnVlfSk7CmFhYS5kaXNwYXRjaEV2 ZW50KGVlZSk7Cgo8L3NjcmlwdD4KCjwvYm9keT4KCjwvaHRtbD4=