Diff
Modified: trunk/PerformanceTests/ChangeLog (287178 => 287179)
--- trunk/PerformanceTests/ChangeLog 2021-12-17 11:59:19 UTC (rev 287178)
+++ trunk/PerformanceTests/ChangeLog 2021-12-17 12:41:14 UTC (rev 287179)
@@ -1,3 +1,24 @@
+2021-12-17 Rob Buis <[email protected]>
+
+ [css-contain][Performance test] Add test contain-paint-text-nowrap.html
+ https://bugs.webkit.org/show_bug.cgi?id=234001
+
+ Reviewed by Simon Fraser.
+
+ Add test contain-paint-text-nowrap.html to verify that paint containment
+ improves the case where many contained children have inline text that is
+ wider than the container width. The improvement is because paint
+ containment clips the child content.
+
+ This patch also introduces the Containment directory to separate the
+ containment tests.
+
+ * Containment/contain-paint-nowrap.html:
+ * Containment/css-contain-change-size.html: Renamed from PerformanceTests/Layout/css-contain-change-size.html.
+ * Containment/css-contain-layout-size-inside-complex-document.html: Renamed from PerformanceTests/Layout/css-contain-layout-size-inside-complex-document.html.
+ * Containment/large-grid.html: Renamed from PerformanceTests/Layout/large-grid.html.
+ * Paint/lots-of-self-painting-layers.html: use let instead of var
+
2021-12-14 Jean-Yves Avenard <[email protected]>
Distinguish contiguous SharedBuffer from non-contiguous one and guarantee immutability: part 3
Copied: trunk/PerformanceTests/Containment/contain-paint-nowrap.html (from rev 287178, trunk/PerformanceTests/Paint/lots-of-self-painting-layers.html) (0 => 287179)
--- trunk/PerformanceTests/Containment/contain-paint-nowrap.html (rev 0)
+++ trunk/PerformanceTests/Containment/contain-paint-nowrap.html 2021-12-17 12:41:14 UTC (rev 287179)
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<script src=""
+<title>Tracking the performance of paint containment and inline text that is not wrapped</title>
+<style>
+ #listContainer {
+ margin: 0 auto;
+ width: 600px;
+ position: relative;
+ contain: paint;
+ }
+
+ .listItem {
+ outline: 2px solid green;
+ position: relative;
+ }
+</style>
+</head>
+
+<body>
+ <pre id="log"></pre>
+
+ <div id="listContainer"></div>
+ <script>
+ const LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.";
+
+ let listContainer = null;
+ function createListItem() {
+ let item = document.createElement("div");
+ item.classList.add("listItem");
+ item.textContent = LOREM_IPSUM.substr(
+ Math.floor(Math.random() * 100), Math.floor(Math.random() * 200) + 150);
+ item.style.whiteSpace = "nowrap";
+ listContainer.appendChild(item);
+ }
+
+ function setupTest() {
+ listContainer = document.getElementById("listContainer");
+ for (let i = 0; i < 10000; ++i)
+ createListItem();
+ window.requestAnimationFrame(runTest);
+ }
+
+ let isDone = false;
+ PerfTestRunner.prepareToMeasureValuesAsync({ done: done, unit: 'ms' });
+ function done() {
+ isDone = true;
+ listContainer.innerHTML = "";
+ }
+
+ let startTime;
+ let height = 0;
+ function runTest() {
+ if (startTime)
+ PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
+
+ if (!isDone) {
+ startTime = PerfTestRunner.now();
+ listContainer.firstChild.style.height = height + "px";
+ height++;
+ window.requestAnimationFrame(runTest);
+ }
+ }
+
+ _onload_ = setupTest;
+ </script>
+</body>
+</html>
Copied: trunk/PerformanceTests/Containment/css-contain-change-size.html (from rev 287178, trunk/PerformanceTests/Layout/css-contain-change-size.html) (0 => 287179)
--- trunk/PerformanceTests/Containment/css-contain-change-size.html (rev 0)
+++ trunk/PerformanceTests/Containment/css-contain-change-size.html 2021-12-17 12:41:14 UTC (rev 287179)
@@ -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
Copied: trunk/PerformanceTests/Containment/css-contain-layout-size-inside-complex-document.html (from rev 287178, trunk/PerformanceTests/Layout/css-contain-layout-size-inside-complex-document.html) (0 => 287179)
--- trunk/PerformanceTests/Containment/css-contain-layout-size-inside-complex-document.html (rev 0)
+++ trunk/PerformanceTests/Containment/css-contain-layout-size-inside-complex-document.html 2021-12-17 12:41:14 UTC (rev 287179)
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<title>Performance test changing "contain: layout size" box inside a document with complicated and expensive layout</title>
+<style>
+#wrapper {
+ display: flex;
+ flex-direction: column;
+}
+.row {
+ display: flex;
+}
+#target {
+ contain: layout size;
+}
+
+</style>
+<script src=""
+<pre id="log"></pre>
+<div id="wrapper"></div>
+<script>
+ let wrapper = document.getElementById("wrapper");
+ let target = undefined;
+
+ const NUM_ROWS = 10;
+ const DOM_DEPTH = 100;
+ function createCells(depth) {
+ let content = document.createElement("div");
+ if (!target) {
+ target = document.createElement("div");
+ target.id = "target";
+ content.appendChild(target);
+ }
+ content.appendChild(document.createElement("h1"));
+ content.appendChild(document.createElement("paragraph"));
+
+ if (depth > 0)
+ content.appendChild(createCells(depth - 1));
+
+ return content;
+ }
+
+ function generateContent() {
+ for (let i = 0; i < NUM_ROWS; i++) {
+ let row = document.createElement("div");
+ row.classList.add("row");
+ row.appendChild(createCells(DOM_DEPTH));
+ wrapper.appendChild(row);
+ }
+ }
+
+ function addTextToTarget() {
+ for (let i = 0; i < 5; i++) {
+ let textNode = document.createElement("div");
+ textNode.innerHTML = "some text";
+ target.appendChild(textNode);
+ }
+ }
+
+ function removeTextFromTarget() {
+ while (target.firstElementChild)
+ target.removeChild(target.firstElementChild);
+ }
+
+ function runTest() {
+ addTextToTarget();
+ document.body.getBoundingClientRect();
+ removeTextFromTarget();
+ document.body.getBoundingClientRect();
+ }
+
+ function setupTest() {
+ generateContent();
+ document.body.getBoundingClientRect();
+ PerfTestRunner.measureRunsPerSecond({
+ description: 'Measures performance of changing contain: layout size box inside a document with complicated and expensive layout.',
+ run: function () {
+ runTest();
+ },
+ done: function() {
+ wrapper.innerHTML = "";
+ }
+ });
+ }
+ window.requestAnimationFrame(setupTest);
+
+</script>
Copied: trunk/PerformanceTests/Containment/large-grid.html (from rev 287178, trunk/PerformanceTests/Layout/large-grid.html) (0 => 287179)
--- trunk/PerformanceTests/Containment/large-grid.html (rev 0)
+++ trunk/PerformanceTests/Containment/large-grid.html 2021-12-17 12:41:14 UTC (rev 287179)
@@ -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>
Deleted: trunk/PerformanceTests/Layout/css-contain-change-size.html (287178 => 287179)
--- trunk/PerformanceTests/Layout/css-contain-change-size.html 2021-12-17 11:59:19 UTC (rev 287178)
+++ trunk/PerformanceTests/Layout/css-contain-change-size.html 2021-12-17 12:41:14 UTC (rev 287179)
@@ -1,75 +0,0 @@
-<!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
Deleted: trunk/PerformanceTests/Layout/css-contain-layout-size-inside-complex-document.html (287178 => 287179)
--- trunk/PerformanceTests/Layout/css-contain-layout-size-inside-complex-document.html 2021-12-17 11:59:19 UTC (rev 287178)
+++ trunk/PerformanceTests/Layout/css-contain-layout-size-inside-complex-document.html 2021-12-17 12:41:14 UTC (rev 287179)
@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<title>Performance test changing "contain: layout size" box inside a document with complicated and expensive layout</title>
-<style>
-#wrapper {
- display: flex;
- flex-direction: column;
-}
-.row {
- display: flex;
-}
-#target {
- contain: layout size;
-}
-
-</style>
-<script src=""
-<pre id="log"></pre>
-<div id="wrapper"></div>
-<script>
- let wrapper = document.getElementById("wrapper");
- let target = undefined;
-
- const NUM_ROWS = 10;
- const DOM_DEPTH = 100;
- function createCells(depth) {
- let content = document.createElement("div");
- if (!target) {
- target = document.createElement("div");
- target.id = "target";
- content.appendChild(target);
- }
- content.appendChild(document.createElement("h1"));
- content.appendChild(document.createElement("paragraph"));
-
- if (depth > 0)
- content.appendChild(createCells(depth - 1));
-
- return content;
- }
-
- function generateContent() {
- for (let i = 0; i < NUM_ROWS; i++) {
- let row = document.createElement("div");
- row.classList.add("row");
- row.appendChild(createCells(DOM_DEPTH));
- wrapper.appendChild(row);
- }
- }
-
- function addTextToTarget() {
- for (let i = 0; i < 5; i++) {
- let textNode = document.createElement("div");
- textNode.innerHTML = "some text";
- target.appendChild(textNode);
- }
- }
-
- function removeTextFromTarget() {
- while (target.firstElementChild)
- target.removeChild(target.firstElementChild);
- }
-
- function runTest() {
- addTextToTarget();
- document.body.getBoundingClientRect();
- removeTextFromTarget();
- document.body.getBoundingClientRect();
- }
-
- function setupTest() {
- generateContent();
- document.body.getBoundingClientRect();
- PerfTestRunner.measureRunsPerSecond({
- description: 'Measures performance of changing contain: layout size box inside a document with complicated and expensive layout.',
- run: function () {
- runTest();
- },
- done: function() {
- wrapper.innerHTML = "";
- }
- });
- }
- window.requestAnimationFrame(setupTest);
-
-</script>
Deleted: trunk/PerformanceTests/Layout/large-grid.html (287178 => 287179)
--- trunk/PerformanceTests/Layout/large-grid.html 2021-12-17 11:59:19 UTC (rev 287178)
+++ trunk/PerformanceTests/Layout/large-grid.html 2021-12-17 12:41:14 UTC (rev 287179)
@@ -1,155 +0,0 @@
-<!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>
Modified: trunk/PerformanceTests/Paint/lots-of-self-painting-layers.html (287178 => 287179)
--- trunk/PerformanceTests/Paint/lots-of-self-painting-layers.html 2021-12-17 11:59:19 UTC (rev 287178)
+++ trunk/PerformanceTests/Paint/lots-of-self-painting-layers.html 2021-12-17 12:41:14 UTC (rev 287179)
@@ -36,11 +36,10 @@
listContainer = document.getElementById("listContainer");
for (let i = 0; i < 10000; ++i)
createListItem();
- document.body.getBoundingClientRect();
window.requestAnimationFrame(runTest);
}
- var isDone = false;
+ let isDone = false;
PerfTestRunner.prepareToMeasureValuesAsync({ done: done, unit: 'ms' });
function done() {
isDone = true;
@@ -47,8 +46,8 @@
listContainer.innerHTML = "";
}
- var startTime;
- var height = 0;
+ let startTime;
+ let height = 0;
function runTest() {
if (startTime)
PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
