elem-ruby.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. // Browser support test for the HTML5 <ruby>, <rt> and <rp> elements
  2. // http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-ruby-element
  3. //
  4. // by @alrra
  5. Modernizr.addTest('ruby', function () {
  6. var ruby = document.createElement('ruby'),
  7. rt = document.createElement('rt'),
  8. rp = document.createElement('rp'),
  9. docElement = document.documentElement,
  10. displayStyleProperty = 'display',
  11. fontSizeStyleProperty = 'fontSize'; // 'fontSize' - because it`s only used for IE6 and IE7
  12. ruby.appendChild(rp);
  13. ruby.appendChild(rt);
  14. docElement.appendChild(ruby);
  15. // browsers that support <ruby> hide the <rp> via "display:none"
  16. if ( getStyle(rp, displayStyleProperty) == 'none' || // for non-IE browsers
  17. // but in IE browsers <rp> has "display:inline" so, the test needs other conditions:
  18. getStyle(ruby, displayStyleProperty) == 'ruby' && getStyle(rt, displayStyleProperty) == 'ruby-text' || // for IE8 & IE9
  19. getStyle(rp, fontSizeStyleProperty) == '6pt' && getStyle(rt, fontSizeStyleProperty) == '6pt' ) { // for IE6 & IE7
  20. cleanUp();
  21. return true;
  22. } else {
  23. cleanUp();
  24. return false;
  25. }
  26. function getStyle( element, styleProperty ) {
  27. var result;
  28. if ( window.getComputedStyle ) { // for non-IE browsers
  29. result = document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProperty);
  30. } else if ( element.currentStyle ) { // for IE
  31. result = element.currentStyle[styleProperty];
  32. }
  33. return result;
  34. }
  35. function cleanUp() {
  36. docElement.removeChild(ruby);
  37. // the removed child node still exists in memory, so ...
  38. ruby = null;
  39. rt = null;
  40. rp = null;
  41. }
  42. });