Title: [286595] trunk/PerformanceTests
- Revision
- 286595
- Author
- [email protected]
- Date
- 2021-12-07 03:36:58 -0800 (Tue, 07 Dec 2021)
Log Message
[Performance test][css-contain] Add test large-grid.html
https://bugs.webkit.org/show_bug.cgi?id=233628
Reviewed by Rob Buis.
This test large-grid.html is imported from Chromium, and we change it a little bit.
This case tests the performance of getting gridContainer.offsetHeight which is the parent of
a large grid with `contain: strict`. The performance is improved when enable CSS contain,
because offsetHeight returns the value directly if the element doesn't need relayout, see
`Document::updateLayoutIfDimensionsOutOfDate`. `contain: strict` sets a relayout boundary to
the large grid, so when its subtree changes, the container of the large grid doesn't need
relayout.
* Layout/large-grid.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/PerformanceTests/ChangeLog (286594 => 286595)
--- trunk/PerformanceTests/ChangeLog 2021-12-07 10:46:53 UTC (rev 286594)
+++ trunk/PerformanceTests/ChangeLog 2021-12-07 11:36:58 UTC (rev 286595)
@@ -1,3 +1,20 @@
+2021-12-07 Cathie Chen <[email protected]>
+
+ [Performance test][css-contain] Add test large-grid.html
+ https://bugs.webkit.org/show_bug.cgi?id=233628
+
+ Reviewed by Rob Buis.
+
+ This test large-grid.html is imported from Chromium, and we change it a little bit.
+ This case tests the performance of getting gridContainer.offsetHeight which is the parent of
+ a large grid with `contain: strict`. The performance is improved when enable CSS contain,
+ because offsetHeight returns the value directly if the element doesn't need relayout, see
+ `Document::updateLayoutIfDimensionsOutOfDate`. `contain: strict` sets a relayout boundary to
+ the large grid, so when its subtree changes, the container of the large grid doesn't need
+ relayout.
+
+ * Layout/large-grid.html: Added.
+
2021-12-06 Zan Dobersek <[email protected]>
[RAMification] Add support for dumping smaps rollups on Linux
Added: trunk/PerformanceTests/Layout/large-grid.html (0 => 286595)
--- trunk/PerformanceTests/Layout/large-grid.html (rev 0)
+++ trunk/PerformanceTests/Layout/large-grid.html 2021-12-07 11:36:58 UTC (rev 286595)
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <script src=""
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+<style>
+html, body, #gridContainer { height: 100%; }
+
+ui-pane#main {
+ contain: strict;
+ min-width: 100% !important;
+ width: 100% !important;
+ max-width: 100% !important;
+ min-height: 100% !important;
+ height: 100% !important;
+ max-height: 100% !important;
+ overflow: hidden;
+}
+
+[row1] {
+ grid-row-start: 1;
+ grid-row-end: auto;
+}
+
+[row2] {
+ grid-row-start: 2;
+ grid-row-end: auto;
+}
+
+
+[col2] {
+ grid-column-start: 2;
+ grid-column-end: auto;
+}
+
+ui-pane {
+ display: grid;
+ height: 100%;
+ contain: content;
+}
+
+[hgrid] {
+ grid-template-rows: 1fr;
+}
+
+[vgrid] {
+ grid-template-columns: 1fr;
+}
+
+ui-icon {
+ display: inline-block;
+}
+
+[collapsed ] { display: none; }
+
+.eventChildrenWrap {
+ grid-column: 1/span 3;
+ contain: content;
+}
+
+.eventChildrenContainer {
+ display: grid;
+ grid-template-columns: 3em 0px 1fr;
+ contain: content;
+}
+
+.actionBlockWrap {
+ grid-column: 3;
+ align-self: start;
+ contain: layout style;
+ position: relative;
+}
+
+.actionBlock {
+ display: grid;
+ grid-template-columns: 1fr;
+ overflow: hidden;
+ contain: content;
+}
+
+</style>
+
+</head>
+
+<body>
+ <pre id="log"></pre>
+
+ <div id="gridContainer">
+ <ui-pane id="main" vgrid="" style="grid-template-rows: 1fr;">
+ <ui-pane id="middle" row1="" hgrid="" style="grid-template-columns: 320px 1fr 300px;">
+ <ui-pane col2="">
+ <ui-body row2="">
+ <ui-pane class="eventSheetViewPane">
+ <ui-body row2="" class="eventSheetView">
+ <div id="thisistheone" class="eventChildrenWrap">
+ <div class="eventChildrenContainer">
+ <div class="actionBlockWrap">
+ <div class="actionBlock" id="inserthere">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ui-body>
+ </ui-pane>
+ </ui-body>
+ </ui-pane>
+
+ </ui-pane>
+ </ui-pane>
+ </div>
+
+ <script>
+ var target = document.getElementById('thisistheone');
+ var gridContainer = document.getElementById('gridContainer');
+
+ function setup() {
+ let insert = document.getElementById('inserthere');
+ for (let i = 0; i < 50; ++i) {
+ let name = document.createElement('div');
+ name.className = 'actionNameCell';
+ name.innerHTML = '<ui-icon style="width: 20px; height: 20px; "></ui-icon><span class="actionObjectNameSpan">Button</span>';
+ let desc = document.createElement('div');
+ desc.className = 'actionDescCell';
+ desc.innerHTML = 'Set position to <event-parameter data-index="0"> <ui-icon class="objectParameterIcon" style="width: 20px; height: 20px; "></ui-icon><span class="objectParameterObjectName">Sprite</span> </event-parameter> <em>(image point <event-parameter data-index="1">3213213</event-parameter>)</em>';
+ insert.appendChild(name);
+ insert.appendChild(desc);
+ }
+ }
+
+ function test() {
+ target.setAttribute('collapsed', '');
+ gridContainer.offsetHeight;
+
+ target.removeAttribute('collapsed');
+ gridContainer.offsetHeight;
+ }
+
+ function done() {
+ let insert = document.getElementById('inserthere');
+ insert.innerHTML = "";
+ }
+
+ setup();
+ PerfTestRunner.measureRunsPerSecond({
+ description: "Measures performance of getting offsetHeight of a large grid container.",
+ run: test,
+ done: done
+ });
+ </script>
+</body>
+
+</html>
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
