Skip to content

GitLab

T
tangled
Commit ee8ec000 authored by Naina Raisinghani's avatar Naina Raisinghani Committed by Commit Bot
Browse files
Options

Add testcases to PerformanceTests/CSS to test changing style using selectors 

We then change the style of all elements in the tree and benchmark the
time spent. This allows us to set up a benchmark for style manipulation
done using selectors.

This adds test to apply pseudo selectors on:
1. Children of elements
2. Grand children of elements
3. All elements (universal selector)
4. Checking for partrial match for an attribute

Bug: 741970
Change-Id: Idb1cb91fbbcc20044cf902bb5e193cb7a73343e0
Reviewed-on: https://chromium-review.googlesource.com/577330Reviewed-by: default avatarDarren Shen <shend@chromium.org>
Reviewed-by: default avatarKentaro Hara <haraken@chromium.org>
Commit-Queue: nainar <nainar@chromium.org>
Cr-Commit-Position: refs/heads/master@{#488145}
parent ca6d2177
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 0 deletions
third_party/WebKit/PerformanceTests/CSS/ChangeStyleChildElementSelectors.html 0 → 100644
View file @ ee8ec000
<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
<script src="resources/utils.js"></script>
</head>
<body>
</body>
<script>
createRegularDOMTree();
PerfTestRunner.measureTime({
description: "Measures the performance of applying a style on the div child of a div.",
run: function() {
var rule = applyCSSRule("div div { color: red; }");
forceStyleRecalc(document.body);
rule.remove();
forceStyleRecalc(document.body);
},
tracingCategories: 'blink',
traceEventsToMeasure: [
'Document::updateStyle',
'Document::recalcStyle',
'Document::rebuildLayoutTree'
]
});
</script>
</html>
\ No newline at end of file
third_party/WebKit/PerformanceTests/CSS/ChangeStyleElementSelector.html 0 → 100644
View file @ ee8ec000
<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
<script src="resources/utils.js"></script>
</head>
<body>
</body>
<script>
createRegularDOMTree();
PerfTestRunner.measureTime({
description: "Measures the performance of applying a style on all divs.",
run: function() {
var rule = applyCSSRule("div { color: red; }");
forceStyleRecalc(document.body);
rule.remove();
forceStyleRecalc(document.body);
},
tracingCategories: 'blink',
traceEventsToMeasure: [
'Document::updateStyle',
'Document::recalcStyle',
'Document::rebuildLayoutTree'
]
});
</script>
</html>
\ No newline at end of file
third_party/WebKit/PerformanceTests/CSS/ChangeStyleGrandChildElementSelector.html 0 → 100644
View file @ ee8ec000
<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
<script src="resources/utils.js"></script>
</head>
<body>
</body>
<script>
createRegularDOMTree();
PerfTestRunner.measureTime({
description: "Measures the performance of applying a style on the div grandchild of a div.",
run: function() {
var rule = applyCSSRule("div div div { color: red; }");
forceStyleRecalc(document.body);
rule.remove();
forceStyleRecalc(document.body);
},
tracingCategories: 'blink',
traceEventsToMeasure: [
'Document::updateStyle',
'Document::recalcStyle',
'Document::rebuildLayoutTree'
]
});
</script>
</html>
\ No newline at end of file
third_party/WebKit/PerformanceTests/CSS/ChangeStylePartialAttributeMatchingSelector.html 0 → 100644
View file @ ee8ec000
<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
<script src="resources/utils.js"></script>
</head>
<body>
</body>
<script>
createRegularDOMTree();
var allElements = document.body.getElementsByTagName("div");
for (var i=0; i < allElements.length; i+=2) {
allElements[i].className = "wrap";
}
PerfTestRunner.measureTime({
description: "Measures the performance of partial attribute matching.",
run: function() {
var rule = applyCSSRule("[class^='wrap'] { color: red; }");
forceStyleRecalc(document.body);
rule.remove();
forceStyleRecalc(document.body);
},
tracingCategories: 'blink',
traceEventsToMeasure: [
'Document::updateStyle',
'Document::recalcStyle',
'Document::rebuildLayoutTree'
]
});
</script>
</html>
\ No newline at end of file
third_party/WebKit/PerformanceTests/CSS/ChangeStyleSinglePseudoSelector.html~HEAD 0 → 100644
View file @ ee8ec000
<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
<script src="resources/utils.js"></script>
</head>
<body>
</body>
<script>
createRegularDOMTree();
PerfTestRunner.measureTime({
description: "Measures the performance of a solo pseudo selector.",
run: function() {
var rule = applyCSSRule("div:after { content: 'after'; }");
forceStyleRecalc(document.body);
rule.remove();
forceStyleRecalc(document.body);
},
tracingCategories: 'blink',
traceEventsToMeasure: [
'Document::updateStyle',
'Document::recalcStyle',
'Document::rebuildLayoutTree'
]
});
</script>
</html>
\ No newline at end of file
third_party/WebKit/PerformanceTests/CSS/ChangeStyleUniversalSelector.html 0 → 100644
View file @ ee8ec000
<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
<script src="resources/utils.js"></script>
</head>
<body>
</body>
<script>
createRegularDOMTree();
PerfTestRunner.measureTime({
description: "Measures the performance of the universal selector.",
run: function() {
var rule = applyCSSRule("* { color: red; }");
forceStyleRecalc(document.body);
rule.remove();
forceStyleRecalc(document.body);
},
tracingCategories: 'blink',
traceEventsToMeasure: [
'Document::updateStyle',
'Document::recalcStyle',
'Document::rebuildLayoutTree'
]
});
</script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment