<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#target {
  border-style: solid;
  outline-style: solid;
  column-rule-style: solid;
}
</style>
<div id="target"></div>
<script>
var lengthProperties = [
  'baselineShift',
  'borderBottomWidth',
  'borderLeftWidth',
  'borderRightWidth',
  'borderTopWidth',
  'bottom',
  'cx',
  'cy',
  'flexBasis',
  'height',
  'left',
  'letterSpacing',
  'marginBottom',
  'marginLeft',
  'marginRight',
  'marginTop',
  'maxHeight',
  'maxWidth',
  'minHeight',
  'minWidth',
  'offsetDistance',
  'outlineOffset',
  'outlineWidth',
  'paddingBottom',
  'paddingLeft',
  'paddingRight',
  'paddingTop',
  'perspective',
  'r',
  'right',
  'rx',
  'ry',
  'shapeMargin',
  'strokeDashoffset',
  'strokeWidth',
  'top',
  'verticalAlign',
  'borderHorizontalSpacing',
  'borderVerticalSpacing',
  'columnGap',
  'columnRuleWidth',
  'columnWidth',
  'perspectiveOriginX',
  'perspectiveOriginY',
  'transformOriginX',
  'transformOriginY',
  'transformOriginZ',
  'width',
  'wordSpacing',
  'x',
  'y',
  'lineHeight',
];
var expected = {};

setup(() => {
  for (var property of lengthProperties) {
    target.style[property] = '10px';
    expected[property] = getComputedStyle(target)[property];
  }
  target.style.transition = '1s';
  if (window.testRunner)
    testRunner.setPageZoomFactor(2);
});

for (var property of lengthProperties) {
  test(() => {
    assert_equals(getComputedStyle(target)[property], expected[property]);
  }, 'Computed value of transitionable ' + property + ' should not change when zoom changes');
}
</script>