transform-perspective.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="testElement"></div>
<script>
var EPSILON = 1e-6; // float epsilon
var supportedUnits = [
  'px',
  'em',
  'ex',
  'ch',
  'rem',
  'vw',
  'vh',
  'vmin',
  'vmax',
  'cm',
  'mm',
  'in',
  'pc',
  'pt'
];
// Note: unsupportedUnits = ['percent', 'q'];

test(function() {
  for (var i = 0; i < supportedUnits.length; i++) {
    var unit = supportedUnits[i];
    var cssText = 'perspective(' + i + unit + ')';
    testElement.style.transform = cssText;

    var result = testElement.attributeStyleMap.get('transform');
    assert_equals(result.toString(), cssText);
    assert_equals(result.constructor.name, CSSTransformValue.name);

    var components = [...result.values()];
    assert_equals(components.length, 1);
    assert_equals(components[0].constructor.name, CSSPerspective.name);
    assert_equals(components[0].toString(), cssText);
  }
}, "Perspective read from a StyleMap is correct");

test(function() {
  for (var i = 0; i < supportedUnits.length; i++) {
    var unit = supportedUnits[i];
    var perspective = new CSSTransformValue([
        new CSSPerspective(new CSSUnitValue(i, unit))]);
    testElement.attributeStyleMap.set('transform', perspective);

    var cssText = 'perspective(' + i + unit + ')';
    assert_equals(testElement.style.transform, cssText);
  }
}, "Set Perspective into the inline StylePropertyMap");

</script>
chromium/third_party/blink/web_tests/typedcssom/inlinestyle/transform-perspective.html
