test_getPathSegmentAtLength_with_d_property.html (1645B)
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>