test_style_flush_on_dom_api_with_d_property.html

<!DOCTYPE html>
<title>Test DOM APIs which flush the style properly, with d property</title>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style>
svg {
  width: 10%;
  height: 10%;
  background: #eee;
}
svg path {
  fill: none;
  stroke: #000;
}
</style>

<div id="log"></div>

<svg viewBox="0 0 20 20" id="svgroot"></svg>

<script>
'use strict';

function createPath(t) {
  const target = document.createElementNS("http://www.w3.org/2000/svg", "path");
  document.getElementById('svgroot').appendChild(target);

  if (t && typeof t.add_cleanup === "function") {
    t.add_cleanup(function() {
      target.remove();
    });
  }

  // Set an initial d and flush style first to make sure the following DOM APIs
  // do flush again.
  target.style.d = 'path("M 0 0")';
  assert_equals(getComputedStyle(target).d, 'path("M 0 0")', "the initial d");
  return target;
}

test(function(t) {
  const target = createPath(t);
  target.style.d = 'path("M5,5 L10,5 L10,10")';
  assert_equals(target.getTotalLength(), 10, "the total length");
}, "getTotalLength() with d property");

test(function(t) {
  const target = createPath(t);
  target.style.d = 'path("M5,5 L10,5 L10,10")';
  // The first segment of path is (5,5) to (10,5), its length is 5.
  // The second segment of path is (10,5) to (10,10), its length is 5.
  // So, the length 8 is on the 2nd segment, at (10,8).
  const point = target.getPointAtLength(8);
  assert_equals(point.x, 10, "x-axis position");
  assert_equals(point.y, 8, "y-axis position");
}, "getPointAtLength() with d property");

test(function(t) {
  const target = createPath(t);
  const svgPoint = document.getElementById("svgroot").createSVGPoint();
  svgPoint.x = 10;
  svgPoint.y = 8;

  target.style.d = 'path("M5,5 L10,5 L10,10")';
  assert_equals(target.isPointInFill(svgPoint), true);
}, "isPointInFill() with d property");

test(function(t) {
  const target = createPath(t);
  const svgPoint = document.getElementById("svgroot").createSVGPoint();
  svgPoint.x = 10;
  svgPoint.y = 8;

  target.style.d = 'path("M5,5 L10,5 L10,10")';
  assert_equals(target.isPointInStroke(svgPoint), true);
}, "isPointInStroke() with d property");

</script>
chromium/third_party/blink/web_tests/external/wpt/svg/path/property/test_style_flush_on_dom_api_with_d_property.html
