Title: [280286] trunk/PerformanceTests
- Revision
- 280286
- Author
- [email protected]
- Date
- 2021-07-25 06:00:57 -0700 (Sun, 25 Jul 2021)
Log Message
[Performance test][css-contain] Add test to contain: size layout
https://bugs.webkit.org/show_bug.cgi?id=227948
Reviewed by Ryosuke Niwa.
This test emulates the scenario that a small part of the page is changed. If it's applied contain: size layout,
the performance should be improved. This test is a transform of the test [1] in blink.
[1] third_party/blink/perf_tests/layout/css-contain-change-text.html
* Layout/css-contain-change-size.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/PerformanceTests/ChangeLog (280285 => 280286)
--- trunk/PerformanceTests/ChangeLog 2021-07-24 20:11:12 UTC (rev 280285)
+++ trunk/PerformanceTests/ChangeLog 2021-07-25 13:00:57 UTC (rev 280286)
@@ -1,3 +1,17 @@
+2021-07-25 Cathie Chen <[email protected]>
+
+ [Performance test][css-contain] Add test to contain: size layout
+ https://bugs.webkit.org/show_bug.cgi?id=227948
+
+ Reviewed by Ryosuke Niwa.
+
+ This test emulates the scenario that a small part of the page is changed. If it's applied contain: size layout,
+ the performance should be improved. This test is a transform of the test [1] in blink.
+
+ [1] third_party/blink/perf_tests/layout/css-contain-change-text.html
+
+ * Layout/css-contain-change-size.html: Added.
+
2021-07-16 Manuel Rego Casasnovas <[email protected]>
Remove CSS Regions perf tests
Added: trunk/PerformanceTests/Layout/css-contain-change-size.html (0 => 280286)
--- trunk/PerformanceTests/Layout/css-contain-change-size.html (rev 0)
+++ trunk/PerformanceTests/Layout/css-contain-change-size.html 2021-07-25 13:00:57 UTC (rev 280286)
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<style>
+ .container {
+ position: relative;
+ height: 3000px;
+ }
+
+ .row {
+ position: relative;
+ border-top: 1px solid;
+ box-sizing: border-box;
+ width: 120px;
+ }
+
+ .cell {
+ position: absolute;
+ border-left: 1px solid red;
+ width: 60px;
+ height: 30px;
+ box-sizing: border-box;
+ contain: size layout;
+ }
+</style>
+<script src=""
+<script>
+ const resizingElements = [];
+ const rowCount = 10;
+ const colCount = 10;
+
+ function populateData() {
+ const container = document.createElement('div');
+ container.classList.add('container');
+ let top = 0;
+ for (let i = 0; i < rowCount; i++) {
+ let left = 0;
+ const row = document.createElement('div');
+ row.classList.add('row');
+ row.style.top = top + 'px';
+ for (let j = 0; j < colCount; j++) {
+ const cell = document.createElement('div');
+ cell.classList.add('cell');
+ const resizingElement = document.createElement('div');
+ resizingElement.style.width = (100 * PerfTestRunner.random()).toFixed(0) + 'px';
+ resizingElement.style.height = '100px';
+ cell.appendChild(resizingElement);
+ cell.style.left = left + 'px';
+ row.appendChild(cell);
+
+ resizingElements.push(resizingElement);
+ left += 60;
+ }
+ top += 30;
+ container.appendChild(row);
+ }
+ document.body.appendChild(container);
+ }
+
+ function startTest() {
+ populateData();
+ document.body.getBoundingClientRect();
+
+ PerfTestRunner.measureRunsPerSecond({
+ description: 'Measures performance of changing widths of nodes.',
+ run: function () {
+ for (const element of resizingElements) {
+ element.style.width = (100 * PerfTestRunner.random()).toFixed(0) + 'px';
+ document.body.getBoundingClientRect();
+ }
+ },
+ });
+ }
+</script>
+
+<body _onload_="startTest();">
+</body>
\ No newline at end of file
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
