Как вычислить базовый уровень текста

Question

Я пытаюсь написать тест на работу, есть ли текст оказывается внутри <input> тот же базовый уровень в качестве метки:

Для того, чтобы сделать это, Я хотел бы вычислить базовый текст, который был отображен в каждом элементе, и сравнить два значения. Возможно ли это, и если да, то как это делается? Если нет, есть ли лучший способ установить, что базовый уровень двух элементов одинаковый?

Я нашел способ определения базовой линии метки, которые, кажется, надежно работают:

function getBaseline(element) { 
    var span = document.createElement("span"); 
    span.setAttribute("style", "font-size:0"); 
    span.innerText = "A"; 
    jQuery(element).prepend(span); 
    return span.getBoundingClientRect().bottom; 
} 

Однако этот метод не работает для <input>, так как я не могу вставить промежуток в этом случае ,

Answer 1

Я нашел способ получить вычисленную базовую линию на основе вашей функции. Хитрость заключается в создании оболочки и применении всех стилей от элемента к ней. Я могу подтвердить, что он работает в Firefox (v38) и Chrome (v44) на OSX. К сожалению, в Safari это не работает.

DEMO

function getBaseline(element) { 
    element = jQuery(element); 
    var span = document.createElement("span"); 
    span.setAttribute("style", "font-size:0"); 
    span.innerText = "A"; 

    var wrapper = document.createElement("span"); 
    applyCSSProperties.call(wrapper, element); 
    element.wrap(wrapper); 
    element.before(span); 

    var computed = span.getBoundingClientRect().bottom; 

    span.remove(); 
    element.unwrap(wrapper); 

    return computed; 
} 

function applyCSSProperties(element) { 
    var styles = {}; 
    var comp = getComputedStyle(element[0]); 

    for(var i = 0; i < comp.length; i++){ 
     styles[comp[i]] = comp.getPropertyValue(comp[i]); 
    } 

    jQuery(this).css(styles); 
}