1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<head>
<style id="thestyle"></style>
<script src="../../resources/js-test.js"></script>
</head>
<div><!-- Extra divs so it's clear when we're doing a full document recalc -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="foo">foo</div>
<div class="foo">foo</div>
<div class="foo">foo</div>
<div class="bar">bar</div>
<div class="bar">bar</div>
<div class="bar">bar</div>
<div class="baz">baz</div>
<div class="baz">baz</div>
<div class="baz">baz</div>
<script>
var sheet = document.getElementById('thestyle');
function forceRecalc()
{
document.documentElement.offsetTop;
}
if (window.internals) {
// Add non-existant classname.
forceRecalc();
sheet.textContent = ".nonexistant { color: red; }";
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "0");
// Add two existing classnames.
forceRecalc();
sheet.textContent = ".bar { color: red; }\n.baz { color: red; }";
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
// Remove the classnames from the previous step.
forceRecalc();
sheet.textContent = "";
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
// Test innerHTML.
forceRecalc();
sheet.innerHTML = ".bar { color: red; }\n.baz { color: red; }";
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
// Test deleteRule
forceRecalc();
sheet.sheet.deleteRule(0); // Deletes .bar rule.
// FIXME: Ideally we'd do StyleInvalidationAnalysis here and only recalc 3 bar's, 3 baz's + documentElement
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "43");
shouldBe("getComputedStyle(document.querySelector('.foo')).color", '"rgb(0, 0, 0)"');
shouldBe("getComputedStyle(document.querySelector('.baz')).color", '"rgb(255, 0, 0)"');
shouldBe("getComputedStyle(document.querySelector('.bar')).color", '"rgb(0, 0, 0)"');
// Test insertRule
forceRecalc();
sheet.sheet.insertRule(".foo { color: red; }", 0);
// FIXME: Ideally we'd do StyleInvalidationAnalysis here and only recalc 3 foo's, 3 baz's + documentElement
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "59");
shouldBe("getComputedStyle(document.querySelector('.foo')).color", '"rgb(255, 0, 0)"');
shouldBe("getComputedStyle(document.querySelector('.baz')).color", '"rgb(255, 0, 0)"');
shouldBe("getComputedStyle(document.querySelector('.bar')).color", '"rgb(0, 0, 0)"');
}
</script>
|
