canvas-text-ideographic-space.html | Explore in Territory

<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&#x3000;b&#x3000;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>
chromium/third_party/blink/web_tests/fast/canvas/canvas-text-ideographic-space.html
