dom/svg/test/test_getPathSegmentAtLength_with_d_property.html

   1 <!DOCTYPE html>
   2 <title>Test for getPathSegmentAtLength for d property</title>
   3 <meta charset=utf-8>
   4 <script src="/resources/testharness.js"></script>
   5 <script src="/resources/testharnessreport.js"></script>
   6
   7 <style>
   8 svg {
   9   width: 10%;
  10   height: 10%;
  11   background: #eee;
  12 }
  13 svg path {
  14   fill: none;
  15   stroke: #000;
  16 }
  17 </style>
  18
  19 <div id="log"></div>
  20
  21 <svg viewBox="0 0 20 10">
  22   <path id='target1' d="M2,2 L8,8 L12,4"/>
  23 </svg>
  24 <svg viewBox="0 0 20 10">
  25   <path id='target2' style='d: path("M2,2 L8,8 L12,4")' />
  26 </svg>
  27
  28 <script>
  29 /* global test, assert_equals */
  30
  31 'use strict';
  32
  33 test(function() {
  34   let target1 = document.getElementById('target1');
  35   let target2 = document.getElementById('target2');
  36   assert_equals(target1.getPathSegmentAtLength(5).type, "L");
  37   assert_array_equals(target1.getPathSegmentAtLength(5).values, [8, 8]);
  38   assert_equals(target2.getPathSegmentAtLength(5).type, "L");
  39   assert_array_equals(target2.getPathSegmentAtLength(5).values, [8, 8]);
  40
  41   assert_equals(target1.getPathSegmentAtLength(10).type, "L");
  42   assert_array_equals(target1.getPathSegmentAtLength(10).values, [12, 4]);
  43   assert_equals(target2.getPathSegmentAtLength(10).type, "L");
  44   assert_array_equals(target2.getPathSegmentAtLength(10).values, [12, 4]);
  45 }, "getPathSegmentAtLength works properly on both d attribute and d property");
  46
  47 test(function() {
  48   let target = document.getElementById('target1');
  49   target.style.d = 'path("M2,2 h3 v5")';
  50   assert_equals(target.getPathSegmentAtLength(5).type, "v");
  51   assert_array_equals(target.getPathSegmentAtLength(5).values, [5]);
  52 }, "getPathSegmentAtLength works properly after updating d property");
  53
  54 </script>