<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
  <title>'paint-order' computed style serialization</title>
  <h:script src="/resources/testharness.js"/>
  <h:script src="/resources/testharnessreport.js"/>
  <text id="text" x="100" y="100"/>
  <script><![CDATA[
    'use strict';

    function make_tests(check, type) {
      let tests = [
        // Single keyword
        ["normal", "normal"],
        ["fill", "fill"],
        ["stroke", "stroke"],
        ["markers", "markers"],
        // Two keywords
        ["fill stroke", "fill"],
        ["fill markers", "fill markers"],
        ["stroke fill", "stroke"],
        ["stroke markers", "stroke markers"],
        ["markers fill", "markers"],
        ["markers stroke", "markers stroke"],
        // Three keywords
        ["fill stroke markers", "fill"],
        ["fill markers stroke", "fill markers"],
        ["stroke fill markers", "stroke"],
        ["stroke markers fill", "stroke markers"],
        ["markers fill stroke", "markers"],
        ["markers stroke fill", "markers stroke"],
        // Invalid
        ["foo", "normal"],
        ["fill foo", "normal"],
        ["stroke foo", "normal"],
        ["markers foo", "normal"],
        ["normal foo", "normal"],
        ["fill markers stroke foo", "normal"],
      ];
      for (let [value, expected] of tests) {
        test(() => {
          check(value, expected);
        }, `${document.title}, "${value}" => "${expected}" (${type})`);
      }
    }

    const text = document.getElementById("text");

    make_tests((value, expected) => {
      text.setAttribute("style", "paint-order: " + value);
      let actual = getComputedStyle(text).paintOrder;
      text.removeAttribute("style");
      assert_equals(actual, expected, value);
    }, "property");

    make_tests((value, expected) => {
      text.setAttribute("paint-order", value);
      let actual = getComputedStyle(text).paintOrder;
      text.removeAttribute("paint-order");
      assert_equals(actual, expected, value);
    }, "presentation attribute");
  ]]>
  </script>
</svg>