| <meta charcode="utf-16"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| span { |
| padding : 0px; |
| font-size : 12px; |
| font-family : Arial; |
| display : inline; |
| } |
| </style> |
| <body> |
| <div><span>a　b　c</span></div> |
| <div><canvas></canvas></div> |
| |
| <script> |
| var PIXEL_RATIO = (function () { |
| var ctx = document.createElement("canvas").getContext("2d"), |
| dpr = window.devicePixelRatio || 1, |
| bsr = ctx.webkitBackingStorePixelRatio || |
| ctx.mozBackingStorePixelRatio || |
| ctx.msBackingStorePixelRatio || |
| ctx.oBackingStorePixelRatio || |
| ctx.backingStorePixelRatio || 1; |
| |
| return dpr / bsr; |
| })(); |
| |
| |
| test(function(t) { |
| var canvas = document.querySelector("canvas"); |
| canvas.width = 300 * PIXEL_RATIO; |
| canvas.height = 150 * PIXEL_RATIO; |
| canvas.style.width = 300 + "px"; |
| canvas.style.height = 150 + "px"; |
| canvas.getContext("2d").setTransform(PIXEL_RATIO, 0, 0, PIXEL_RATIO, 0, 0); |
| |
| var context = canvas.getContext("2d"); |
| var span = document.querySelector("span"); |
| |
| var abc = 'a' + '\u3000' + 'b' + '\u3000' + 'c'; |
| context.font = "12px Arial"; |
| context.fillText(abc, 0, 20); |
| |
| spanWidth = span.offsetWidth; |
| canvasWidth = context.measureText(abc).width; |
| assert_approx_equals(spanWidth, canvasWidth, 0.999); |
| }, 'Test canvas text ideographic space.'); |
| </script> |
| </body> |
| |
