Quelle svg.html Sprache: HTML

products/sources/formale Sprachen/C/Firefox/testing/web-platform/tests/resize-observer/svg.html

<!doctype html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/resizeTestHelper.js"></script>
<p>ResizeObserver svg tests</p>
<svg height="430" width="500" >
  <circle cx="10" cy="10" r="5" style="fill:orange;stroke:black;stroke-width:1" />
  <ellipse cx="10" cy="30" rx="5" ry="5" style="fill:orange;stroke:black;stroke-width:1"/>
  <foreignObject cy="50" width="100" height="20">
    <body>
      <p>Here is a paragraph that requires word wrap</p>
    </body>
  </foreignObject>
  <image xlink:href="" x="0" y="100" height="30" width="100" />
  <line x1="0" y1="50" x2="20" y2="70" stroke="black" stroke-width="2"/>
  <path d="M 0 100 L 100 100 L 50 150 z"
        style="fill:orange;stroke:black;stroke-width:1" />
  <polygon points="0,200 100,200 50,250" style="fill:orange;stroke:black;stroke-width:1" />
  <polyline points="0,300 100,300 50,350" style="fill:orange;stroke:black;stroke-width:1"/>
  <rect x="0" y="380" width="10" height="10" style="fill:orange; stroke:black; stroke-width:1" />
  <text x="0" y="400" font-size="20" font-family="Ahem">svg text tag</text>
  <g fill="white" stroke="green" stroke-width="5">
    <rect x="0" y="380" width="50" height="20" id="g_rect" />
  </g>
</svg>
<script>
'use strict';

setup({allow_uncaught_exception: true});

function test0() {
  let target = document.querySelector('circle');
  let helper = new ResizeTestHelper(
    "test0: observe svg:circle",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('r', 10);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
      }
    }
  ]);
  return helper.start();
}

function test1() {
  let target = document.querySelector('ellipse');
  let helper = new ResizeTestHelper(
    "test1: observe svg:ellipse",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('rx', 10);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 20);
        assert_equals(entries[0].contentRect.height, 10);
      }
    }
  ]);
  return helper.start();
}

function test2() {
  let target = document.querySelector('foreignObject');
  let helper = new ResizeTestHelper(
    "test2: observe svg:foreignObject",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('width', 200);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 200);
        assert_equals(entries[0].contentRect.height, 20);
      }
    }
  ]);
  return helper.start();
}

function test3() {
  let target = document.querySelector('image');
  let helper = new ResizeTestHelper(
    "test3: observe svg:image",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('height', 40);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 100);
        assert_equals(entries[0].contentRect.height, 40);
      }
    }
  ]);
  return helper.start();
}

function test4() {
  let target = document.querySelector('line');
  let helper = new ResizeTestHelper(
    "test4: observe svg:line",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('y2', 80);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 20);
        assert_equals(entries[0].contentRect.height, 30);
      }
    }
  ]);
  return helper.start();
}

function test5() {
  let target = document.querySelector('path');
  let helper = new ResizeTestHelper(
    "test5: observe svg:path",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('d', "M 0 100 L 100 100 L 50 160 z");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 100);
        assert_equals(entries[0].contentRect.height, 60);
      }
    }
  ]);
  return helper.start();
}

function test6() {
  let target = document.querySelector('polygon');
  let helper = new ResizeTestHelper(
    "test6: observe svg:polygon",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('points', "0,200 100,200 50,260");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 100);
        assert_equals(entries[0].contentRect.height, 60);
      }
    }
  ]);
  return helper.start();
}

function test7() {
  let target = document.querySelector('polyline');
  let helper = new ResizeTestHelper(
    "test7: observe svg:polyline",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('points', "0,300 100,300 50,360");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 100);
        assert_equals(entries[0].contentRect.height, 60);
      }
    }
  ]);
  return helper.start();
}

function test8() {
  let target = document.querySelector('rect');
  let helper = new ResizeTestHelper(
    "test8: observe svg:rect",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('width', "20");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 20);
        assert_equals(entries[0].contentRect.height, 10);
      }
    }
  ]);
  return helper.start();
}

function test9() {
  let target = document.querySelector('text');
  let helper = new ResizeTestHelper(
    "test9: observe svg:text",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('font-size', "25");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
      }
    }
  ]);
  return helper.start();
}

function test10() {
  let target = document.querySelector('svg');
  let helper = new ResizeTestHelper(
    "test10: observe svg:svg, top/left is 0 even with padding",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.top, 0);
        assert_equals(entries[0].contentRect.left, 0);
      }
    }
  ]);
  return helper.start();
}

function test11() {
  // <svg>
  //   <view></view>
  //   <defs>
  //     <linearGradient>
  //       <stop></stop>
  //     </linearGradient>
  //   </defs>
  // </svg>
  const svgNS = "http://www.w3.org/2000/svg";
  let svg = document.createElementNS(svgNS, 'svg');
  document.body.appendChild(svg);

  let view = document.createElementNS(svgNS, 'view');
  svg.appendChild(view);

  let defs = document.createElementNS(svgNS, 'defs');
  let linearGradient = document.createElementNS(svgNS, 'linearGradient');
  let stop = document.createElementNS(svgNS, 'stop');
  linearGradient.appendChild(stop);
  defs.appendChild(linearGradient);
  svg.appendChild(defs);

  let helper = new ResizeTestHelper(
    "test11: observe svg non-displayable element",
  [
    {
      setup: observer => {
        observer.observe(view);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].target, view);
        assert_equals(entries[0].contentRect.width, 0);
        assert_equals(entries[0].contentRect.height, 0);
      }
    },
    {
      setup: observer => {
        observer.observe(stop);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].target, stop);
        assert_equals(entries[0].contentRect.width, 0);
        assert_equals(entries[0].contentRect.height, 0);
      }
    },
  ]);
  return helper.start(() => svg.remove());
}

function test12() {
  let target = document.querySelector('rect');
  let helper = new ResizeTestHelper(
    "test12: observe svg:rect content box",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('width', 45);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 45);
        assert_equals(entries[0].contentRect.height, 10);
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 45);
        assert_equals(entries[0].contentBoxSize[0].blockSize, 10);
      }
    }
  ]);
  return helper.start();
}

function test13() {
  let target = document.querySelector('rect');
  let helper = new ResizeTestHelper(
    "test13: observe svg:rect border box",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('width', 20);
        target.setAttribute('height', 20);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 20);
        assert_equals(entries[0].contentRect.height, 20);
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 20);
        assert_equals(entries[0].contentBoxSize[0].blockSize, 20);
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 20);
        assert_equals(entries[0].borderBoxSize[0].blockSize, 20);
      }
    }
  ]);
  return helper.start();
}

function test14() {
  let target = document.querySelector('#g_rect');
  let helper = new ResizeTestHelper(
    "test14: observe g:rect content and border box",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 50);
        assert_equals(entries[0].contentRect.height, 20);
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].contentBoxSize[0].blockSize, 20);
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].borderBoxSize[0].blockSize, 20);
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('width', 15);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 15);
        assert_equals(entries[0].contentRect.height, 20);
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 15);
        assert_equals(entries[0].contentBoxSize[0].blockSize, 20);
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 15);
        assert_equals(entries[0].borderBoxSize[0].blockSize, 20);
      }
    }
  ]);
  return helper.start();
}

function test15() {
  let target = document.querySelector('text');
  let helper = new ResizeTestHelper(
    "test15: observe svg:text content and border box",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('font-size', "30");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 360);
        assert_equals(entries[0].contentRect.height, 30);
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 360);
        assert_equals(entries[0].contentBoxSize[0].blockSize, 30);
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 360);
        assert_equals(entries[0].borderBoxSize[0].blockSize, 30);
      }
    }
  ]);
  return helper.start();
}

function test16() {
  let target = document.querySelector('#g_rect');
  let helper = new ResizeTestHelper(
    "test16: observe g:rect content, border and device-pixel-content boxes",
  [
    {
      setup: observer => {
        observer.observe(target, {box: "device-pixel-content-box"});
        target.setAttribute('width', 50);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 50);
        assert_equals(entries[0].contentRect.height, 20);
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].contentBoxSize[0].blockSize, 20);
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].borderBoxSize[0].blockSize, 20);
        assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 20);
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('height', 30);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 50);
        assert_equals(entries[0].contentRect.height, 30);
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].contentBoxSize[0].blockSize, 30);
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].borderBoxSize[0].blockSize, 30);
        assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 30);
      }
    }
  ]);
  return helper.start();
}

function test17() {
  // zoom is not a standard css property, so we should check it first. If the
  // browser doesn't support it, we skip this test.
  if (!CSS.supports("zoom", "0.1")) {
    return Promise.resolve();
  }

  let target = document.querySelector('#g_rect');
  let helper = new ResizeTestHelper(
    "test17: observe g:rect content, border and device-pixel-content boxes with zoom",
  [
    {
      setup: observer => {
        observer.observe(target, {box: "device-pixel-content-box"});
        target.setAttribute('width', 50);
        target.setAttribute('height', 30);
        document.body.style.zoom = 0.1;
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 50);
        assert_equals(entries[0].contentRect.height, 30);
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].contentBoxSize[0].blockSize, 30);
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].borderBoxSize[0].blockSize, 30);
        assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 5);
        assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 3);
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        document.body.style.zoom = 10;
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 50);
        assert_equals(entries[0].contentRect.height, 30);
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].contentBoxSize[0].blockSize, 30);
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 50);
        assert_equals(entries[0].borderBoxSize[0].blockSize, 30);
        assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 500);
        assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 300);
      },
    }
  ]);
  return helper.start();
}

let guard;
test(_ => {
  assert_own_property(window, "ResizeObserver");
  guard = async_test('guard');
}, "ResizeObserver implemented")

test0()
  .then(() => { return test1(); })
  .then(() => { return test2(); })
  .then(() => { return test3(); })
  .then(() => { return test4(); })
  .then(() => { return test5(); })
  .then(() => { return test6(); })
  .then(() => { return test7(); })
  .then(() => { return test8(); })
  .then(() => { return test9(); })
  .then(() => { return test10(); })
  .then(() => { return test11(); })
  .then(() => { return test12(); })
  .then(() => { return test13(); })
  .then(() => { return test14(); })
  .then(() => { return test15(); })
  .then(() => { return test16(); })
  .then(() => { return test17(); })
  .then(() => { guard.done(); });

</script>

Messung V0.5

¤ Dauer der Verarbeitung: 0.34 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.