melink14/rikaikun

Review text area fake div copied styles and tests

melink14 opened this issue · 0 comments

Forked from #672

This fiddle did something similar for calculating cursor position and enumerated the properties it thought were important:
https://jsfiddle.net/dandv/aFPA7

I was considering them all except the text* styles and spacing styles...

// The properties that we copy into a mirrored div.
// Note that some browsers, such as Firefox,
// do not concatenate properties, i.e. padding-top, bottom etc. -> padding,
// so we have to do every single property specifically.
var properties = [
  'boxSizing',
  'width',  // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
  'height',
  'overflowX',
  'overflowY',  // copy the scrollbar for IE

  'borderTopWidth',
  'borderRightWidth',
  'borderBottomWidth',
  'borderLeftWidth',

  'paddingTop',
  'paddingRight',
  'paddingBottom',
  'paddingLeft',

  // https://developer.mozilla.org/en-US/docs/Web/CSS/font
  'fontStyle',
  'fontVariant',
  'fontWeight',
  'fontStretch',
  'fontSize',
  'lineHeight',
  'fontFamily',

  'textAlign',
  'textTransform',
  'textIndent',
  'textDecoration',  // might not make a difference, but better be safe

  'letterSpacing',
  'wordSpacing'
];

I copied all styles except the text* ones. I have explicit test cases for everything except boxSizing and overflow.

overflow fails due to height test but boxSizing has no failing tests if removed.

Will submit as is and create another issue to follow up on these things.