nephele
/
haikuwebkit
1
0
Fork 0
Code Issues Releases Activity
haikuwebkit/PerformanceTests/SVG/SvgHitTesting.html

118 lines
9.5 KiB
HTML
Raw Permalink Normal View History

Add a performance test for hit testing in SVG https://bugs.webkit.org/show_bug.cgi?id=90811 Reviewed by Ryosuke Niwa. The shape rendering code is changing a lot and I'd like a performance test to make sure we don't regress, and to track our improvements. Performance results in my Linux desktop: RESULT SVG: SvgHitTesting= 105.0 ms median= 103.5 ms, stdev= 4.60434577329 ms, min= 101.0 ms, max= 116.0 ms RESULT SVG: SvgHitTesting= 97.8 ms median= 96.5 ms, stdev= 2.67581763205 ms, min= 95.0 ms, max= 102.0 ms RESULT SVG: SvgHitTesting= 104.3 ms median= 104.0 ms, stdev= 1.41774468788 ms, min= 102.0 ms, max= 107.0 ms RESULT SVG: SvgHitTesting= 103.6 ms median= 103.5 ms, stdev= 1.2 ms, min= 102.0 ms, max= 106.0 ms * SVG/SvgHitTesting.html: Added. Canonical link: https://commits.webkit.org/108827@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@122351 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-07-11 18:45:32 +00:00
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
}
#container {
background-color: #eee;
width: 600px;
height: 400px;
}
#title {
position: absolute;
top: 400px;
left: 0px;
font-family: sans-serif;
font-size: 30px;
text-align: right;
width: 600px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="title">SVG Hit Testing</div>
<div id="container">
<svg id="svg" width="600" height="400" xmlns="http://www.w3.org/2000/svg" version="1.0">
<g id="shapes1" transform="translate(-60, -20)">
<circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
<circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
<circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
<ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
<ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
<ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
<rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
<rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
<rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
<path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
<path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
<path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
</g>
<g id="shapes2" transform="translate(-30, -10)">
<circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
<circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
<circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
<ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
<ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
<ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
<rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
<rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
<rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
<path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
<path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
<path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
</g>
<g id="shapes3" transform="translate(0, 0)">
<circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
<circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
<circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
<ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
<ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
<ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
<rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
<rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
<rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
<path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
<path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
<path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
</g>
<g id="shapes4" transform="translate(30, 10)">
<circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
<circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
<circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
<ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
<ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
<ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
<rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
<rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
<rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
<path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
<path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
<path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
</g>
<g id="shapes5" transform="translate(60, 20)">
<circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
<circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
<circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
<ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
<ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
<ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
<rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
<rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
<rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
<path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
<path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
<path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
</g>
</svg>
</div>
</div>
<script src="../resources/runner.js"></script>
<script>
PerfTestRunner.run should take an object https://bugs.webkit.org/show_bug.cgi?id=97743 Reviewed by Kentaro Hara. Rename PerfTestRunner.run to PerfTestRunner.measureTime and make it take an object instead of 5 arguments. Also get rid of PerfTestRunner._loopsPerRun since it's no longer used (it's always 1). * CSS/StyleSheetInsert.html: * DOM/resources/dom-perf.js: * Layout/floats_100_100.html: * Layout/floats_100_100_nested.html: * Layout/floats_20_100.html: * Layout/floats_20_100_nested.html: * Layout/floats_2_100.html: * Layout/floats_2_100_nested.html: * Layout/floats_50_100.html: * Layout/floats_50_100_nested.html: * Parser/html-parser.html: * Parser/html5-full-render.html: * SVG/SvgCubics.html: * SVG/SvgHitTesting.html: * resources/runner.js: Canonical link: https://commits.webkit.org/115832@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@129824 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-09-28 00:26:14 +00:00
PerfTestRunner.measureTime({run: function() {
Add a performance test for hit testing in SVG https://bugs.webkit.org/show_bug.cgi?id=90811 Reviewed by Ryosuke Niwa. The shape rendering code is changing a lot and I'd like a performance test to make sure we don't regress, and to track our improvements. Performance results in my Linux desktop: RESULT SVG: SvgHitTesting= 105.0 ms median= 103.5 ms, stdev= 4.60434577329 ms, min= 101.0 ms, max= 116.0 ms RESULT SVG: SvgHitTesting= 97.8 ms median= 96.5 ms, stdev= 2.67581763205 ms, min= 95.0 ms, max= 102.0 ms RESULT SVG: SvgHitTesting= 104.3 ms median= 104.0 ms, stdev= 1.41774468788 ms, min= 102.0 ms, max= 107.0 ms RESULT SVG: SvgHitTesting= 103.6 ms median= 103.5 ms, stdev= 1.2 ms, min= 102.0 ms, max= 106.0 ms * SVG/SvgHitTesting.html: Added. Canonical link: https://commits.webkit.org/108827@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@122351 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-07-11 18:45:32 +00:00
for (var i = 0; i < 6000; i++) {
var x = 600 * Math.random();
var y = 400 * Math.random();
var el = document.elementFromPoint(x, y);
}
PerfTestRunner.run should take an object https://bugs.webkit.org/show_bug.cgi?id=97743 Reviewed by Kentaro Hara. Rename PerfTestRunner.run to PerfTestRunner.measureTime and make it take an object instead of 5 arguments. Also get rid of PerfTestRunner._loopsPerRun since it's no longer used (it's always 1). * CSS/StyleSheetInsert.html: * DOM/resources/dom-perf.js: * Layout/floats_100_100.html: * Layout/floats_100_100_nested.html: * Layout/floats_20_100.html: * Layout/floats_20_100_nested.html: * Layout/floats_2_100.html: * Layout/floats_2_100_nested.html: * Layout/floats_50_100.html: * Layout/floats_50_100_nested.html: * Parser/html-parser.html: * Parser/html5-full-render.html: * SVG/SvgCubics.html: * SVG/SvgHitTesting.html: * resources/runner.js: Canonical link: https://commits.webkit.org/115832@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@129824 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-09-28 00:26:14 +00:00
}, done:function() {
Add a performance test for hit testing in SVG https://bugs.webkit.org/show_bug.cgi?id=90811 Reviewed by Ryosuke Niwa. The shape rendering code is changing a lot and I'd like a performance test to make sure we don't regress, and to track our improvements. Performance results in my Linux desktop: RESULT SVG: SvgHitTesting= 105.0 ms median= 103.5 ms, stdev= 4.60434577329 ms, min= 101.0 ms, max= 116.0 ms RESULT SVG: SvgHitTesting= 97.8 ms median= 96.5 ms, stdev= 2.67581763205 ms, min= 95.0 ms, max= 102.0 ms RESULT SVG: SvgHitTesting= 104.3 ms median= 104.0 ms, stdev= 1.41774468788 ms, min= 102.0 ms, max= 107.0 ms RESULT SVG: SvgHitTesting= 103.6 ms median= 103.5 ms, stdev= 1.2 ms, min= 102.0 ms, max= 106.0 ms * SVG/SvgHitTesting.html: Added. Canonical link: https://commits.webkit.org/108827@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@122351 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-07-11 18:45:32 +00:00
var wrapper = document.getElementById('wrapper');
if (wrapper)
wrapper.parentNode.removeChild(wrapper);
Some perf. tests have variances that differ greatly between runs https://bugs.webkit.org/show_bug.cgi?id=97510 Reviewed by Benjamin Poulain. PerformanceTests: In order to control the number of iterations and processes to use from run-perf-tests, always use 20 iterations on all tests except Dromaeo, where even doing 5 iterations is prohibitively slow, by default. Without this change, it'll become extremely hard for us to tweak the number of iterations and processes to use from run-perf-tests. * Animation/balls.html: * DOM/DOMTable.html: * DOM/resources/dom-perf.js: (runBenchmarkSuite.PerfTestRunner.measureTime): * Dromaeo/resources/dromaeorunner.js: * Layout/floats_100_100.html: * Layout/floats_100_100_nested.html: * Layout/floats_20_100.html: * Layout/floats_20_100_nested.html: * Layout/floats_2_100.html: * Layout/floats_2_100_nested.html: * Layout/floats_50_100.html: * Layout/floats_50_100_nested.html: * Layout/subtree-detaching.html: * Parser/html5-full-render.html: * SVG/SvgHitTesting.html: * resources/runner.js: * resources/results-template.html: Tools: Use multiple instances of DumpRenderTree or WebKitTestRunner to amortize the effect of the runtime environment on test results (we run each instance after one another, not in parallel). We use 4 instances of the test runner, each executing 5 in-process iterations, for the total of 20 iterations as it was done previously in single process. These values are hard-coded in perftest.py and runner.js but they are to be configurable in the future. Set of 5 iterations obtained by the same test runner is treated as an "iteration group" and each metric now reports an array of the length 4 with each element containing an array of 5 iteration values obtained by each test runner instance as opposed to a flattened array of 20 iteration values. Unfortunately, we can use the same trick on Dromaeo because we're already doing only 5 iterations and repeating the entire Dromaeo 4 times will take too long. We need to disable more Dromaeo tests as needed. To this end, added SingleProcessPerfTest to preserve the old behavior. * Scripts/webkitpy/performance_tests/perftest.py: (PerfTestMetric.append_group): Renamed from append. (PerfTestMetric.grouped_iteration_values): Added. (PerfTestMetric.flattened_iteration_values): Renamed from iteration_values. (PerfTest.__init__): Takes the number of processes (drivers) to run tests with. This parameter is only used by SingleProcessPerfTest. (PerfTest.run): Repeat tests using different driver processes. (PerfTest._run_with_driver): Returns a boolean instead of a list of measured metrics since metrics are shared between multiple drivers (i.e. multiple calls to _run_with_driver). We instead use _ensure_metrics to obtain the matched metrics and store the data there. (PerfTest._ensure_metrics): Added. (SingleProcessPerfTest): Added. Used to run Dromaeo tests where running it on 4 different instances of DumpRenderTree/WebKitTestRunner takes too long. (SingleProcessPerfTest.__init__): (ReplayPerfTest._run_with_driver): Updated to use _ensure_metrics. (PerfTestFactory): Use SingleProcessPerfTest to run Dromaeo tests. * Scripts/webkitpy/performance_tests/perftest_unittest.py: Updated various tests that expect _run_with_driver to return a list of metrics. Now it returns a boolean indicating whether the test succeeded or not. Obtain the dictionary of metrics via test._metrics instead. (TestPerfTestMetric.test_append): Updated per name and added some test cases for grouped_iteration_values. (TestPerfTest._assert_results_are_correct): (TestSingleProcessPerfTest): Added. (TestSingleProcessPerfTest.test_use_only_one_process): (TestSingleProcessPerfTest.test_use_only_one_process.run_single): (TestReplayPerfTest.test_run_with_driver_accumulates_results): (TestReplayPerfTest.test_run_with_driver_accumulates_memory_results): * Scripts/webkitpy/performance_tests/perftestsrunner_integrationtest.py: Updated values of sample standard deviations since we're now running tests 4 times. (MainTest._test_run_with_json_output.mock_upload_json): (MainTest.test_run_with_upload_json_should_generate_perf_webkit_json): LayoutTests: Use dromaeoIterationCount now that we no longer support iterationCount. * fast/harness/perftests/runs-per-second-iterations.html: Canonical link: https://commits.webkit.org/129631@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@144583 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2013-03-03 23:19:31 +00:00
}});
Add a performance test for hit testing in SVG https://bugs.webkit.org/show_bug.cgi?id=90811 Reviewed by Ryosuke Niwa. The shape rendering code is changing a lot and I'd like a performance test to make sure we don't regress, and to track our improvements. Performance results in my Linux desktop: RESULT SVG: SvgHitTesting= 105.0 ms median= 103.5 ms, stdev= 4.60434577329 ms, min= 101.0 ms, max= 116.0 ms RESULT SVG: SvgHitTesting= 97.8 ms median= 96.5 ms, stdev= 2.67581763205 ms, min= 95.0 ms, max= 102.0 ms RESULT SVG: SvgHitTesting= 104.3 ms median= 104.0 ms, stdev= 1.41774468788 ms, min= 102.0 ms, max= 107.0 ms RESULT SVG: SvgHitTesting= 103.6 ms median= 103.5 ms, stdev= 1.2 ms, min= 102.0 ms, max= 106.0 ms * SVG/SvgHitTesting.html: Added. Canonical link: https://commits.webkit.org/108827@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@122351 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-07-11 18:45:32 +00:00
</script>
</body>
</html>