longhand-pending-shorthand-substitution.html

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
  #testElem {
    --height: 30px;
    --size: 12px;
    --size-and-height: var(--size)/var(--height);
    font: italic bold var(--size-and-height) serif, sans-serif;
  }

  #testElem2 {
    --width: 5px;
  }
</style>

<div id='testElem'></div>
<div id='testElem2' style='margin: var(--width); margin-top: 10px;'></div>
<div id='testElem3' style='--b1: 1px solid grey; --b2: 2px dashed green; border: var(--b1); border-right: var(--b2);'></div>
<script>

test(function() {
  var style = getComputedStyle(testElem);
  assert_equals(style.fontSize, '12px');
  assert_equals(style.lineHeight, '30px');
  assert_equals(style.fontStyle, 'italic');
  assert_equals(style.fontWeight, '700');
  assert_equals(style.fontFamily, 'serif, sans-serif');
}, "Test shorthand substitution in font.");

test(function() {
  var style = testElem2.style;
  assert_equals(style.cssText, 'margin-right: ; margin-bottom: ; margin-left: ; margin-top: 10px;');
  assert_equals(style.marginLeft, '');
  assert_equals(style.margin, '');
  assert_equals(style.marginTop, '10px');
}, "Test serialization with specific longhand.");

test(function() {
  var style = testElem3.style;
  assert_equals(style.cssText, '--b1: 1px solid grey; --b2: 2px dashed green; border-top-color: ; border-top-style: ; border-top-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-right: var(--b2);')
  assert_equals(style.border, '');
  assert_equals(style.borderLeft, '');
  assert_equals(style.borderTop, '');
  assert_equals(style.borderBottom, '');
  assert_equals(style.borderRight, 'var(--b2)');
}, "Test serialization for shorthands within shorthands.");

test(function() {
  var style = getComputedStyle(testElem3);
  assert_equals(style.borderTop, '1px solid rgb(128, 128, 128)');
  assert_equals(style.borderRight, '2px dashed rgb(0, 128, 0)');
}, "Test substitution for border");
</script>
chromium/third_party/blink/web_tests/fast/css/variables/longhand-pending-shorthand-substitution.html
