parse-length.html | Explore in Territory

<!DOCTYPE html>
<html>
<script src="../../resources/ahem.js"></script>
<style>
* { font-size: 16px; }
svg, rect { font-family: 'Ahem'; }
div { font-size: 8px; } 
</style>
<html>
<svg id="svg" width="0" height="0"></svg>
<script src="../../resources/js-test.js"></script>
<script>
description("Test that 'length' presentation attribute values are parsed with CSS presentation rules.");

function computedStyle(elementname, property, value) {
  var elm = document.createElementNS('http://www.w3.org/2000/svg', elementname);
  document.getElementById('svg').appendChild(elm);
  elm.setAttribute(property, value);
  var computedValue = getComputedStyle(elm).getPropertyValue(property);
  document.getElementById('svg').removeChild(elm);
  return computedValue;
}

function testComputed(elementname, property, value, expected) {
  shouldBeEqualToString('computedStyle("' + elementname + '", "' + property + '", "' + value + '")', expected);
}

function negativeTest(elementname, property, value, expected) {
  testComputed(elementname, property, value, expected);
}

function testAttributeOnElement(elementname, attributename, initial_value) {
  testComputed(elementname, attributename, "  100", "100px");
  testComputed(elementname, attributename, "100   ", "100px");
  testComputed(elementname, attributename, "100px", "100px");
  testComputed(elementname, attributename, "1em", "16px");
  // testComputed(elementname, attributename, "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
  testComputed(elementname, attributename, "20%", "20%");
  testComputed(elementname, attributename, "-200px", "-200px");

  negativeTest(elementname, attributename, "auto", initial_value);
  negativeTest(elementname, attributename, "100   px", initial_value);
  negativeTest(elementname, attributename, "100px;", initial_value);
  negativeTest(elementname, attributename, "100px !important", initial_value);
  negativeTest(elementname, attributename, "{ 100px }", initial_value);
}

var xyelements = [ "mask", "svg", "rect", "image", "foreignObject" ];
for (var elm of xyelements) {
  let initial_value = elm === "mask" ? "-10%" : "0px";
  testAttributeOnElement(elm, "x", initial_value);
  testAttributeOnElement(elm, "y", initial_value);
}

var rxryelements = [ "rect", "ellipse" ];
for (var elm of rxryelements) {
  let initial_value = "0px";
  testAttributeOnElement(elm, "rx", initial_value);
  testAttributeOnElement(elm, "ry", initial_value);
}

testAttributeOnElement("circle", "r", "0px");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/svg/css/parse-length.html
