Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <title>Emoji tests tests</title>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
</body>
</html>
 
canvas {
  outline: 1px solid red;
  display: block;
}
 
var tests = [
  [
    // Shrug
    [55358, 56631],
    [55358, 8203, 56631]
  ],
  [
    // AU Flag
    [55356, 56806, 55356, 56826 ],
    [55356, 56806, 8203, 55356, 56826]
  ],
  [
    // UN Flag
    [55356, 56826, 55356, 56819],
    [55356, 56826, 8203, 55356, 56819]
  ],
  [
    // English Flag
    [55356, 57332, 56128, 56423, 56128, 56418, 56128, 56421, 56128, 56430, 56128, 56423, 56128, 56447],
    [55356, 57332, 8203, 56128, 56423, 8203, 56128, 56418, 8203, 56128, 56421, 8203, 56128, 56430, 8203, 56128, 56423, 8203, 56128, 56447]
  ],
  [
    // Female superhero
    [55358, 56760, 8205 /* ZWJ */, 9792, 65039],
    [55358, 56760, 8203 /* ZWS */, 9792, 65039]
  ]
];
var stringFromCharCode = String.fromCharCode;
for( var i=0; i<tests.length; i++ ) {
  var itemTests = tests[i];
  var itemResult = [];
  
  for( var j=0; j<itemTests.length; j++ ) {
    var p = document.createElement( 'p' );
    document.body.appendChild( p );
//     p.style.visibility = 'hidden';
    
    var span = document.createElement( 'span' );
    span.style.font = '600 32px Arial';
    span.style.verticalAlign = 'baseline';
    span.innerText = stringFromCharCode.apply( this, itemTests[j] );
    
    p.appendChild( span );
    itemResult[j] = span.offsetWidth;
  }
  
  
  var p = document.createElement( 'p' );
  p.innerText = itemResult[0] === itemResult[1] ? 'unsupported by browser' : 'supported by browser';
  document.body.appendChild( p );
  
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
peterwilsonccpro
0viewers