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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<!DOCTYPE html>
<title>CSS Pseudo Test: CSSPseudoElement GeometryUtils - getBoxQuads</title>
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#CSSPseudoElement-interface">
<link rel="help" href="https://drafts.csswg.org/cssom-view-1/#extension-to-the-geometryutils-interface">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target {
position: absolute;
left: 100px;
top: 50px;
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
#target::before {
content: '';
display: block;
width: 50px;
height: 30px;
padding: 5px;
border: 2px solid blue;
margin: 3px;
}
#target::after {
content: 'after';
display: block;
width: 80px;
height: 40px;
}
</style>
<div id="target"></div>
<script>
test(() => {
let pseudo = target.pseudo("::before");
assert_true(typeof pseudo.getBoxQuads === 'function', 'getBoxQuads should be a function');
}, 'CSSPseudoElement should have getBoxQuads method');
test(() => {
let pseudo = target.pseudo("::before");
let quads = pseudo.getBoxQuads();
assert_true(Array.isArray(quads), 'getBoxQuads should return an array');
}, 'getBoxQuads should return an array');
test(() => {
let pseudo = target.pseudo("::before");
let quads = pseudo.getBoxQuads();
assert_equals(quads.length, 1, 'should return one quad for a block pseudo-element');
let quad = quads[0];
assert_true(quad instanceof DOMQuad, 'each quad should be a DOMQuad');
}, 'getBoxQuads returns DOMQuad for ::before');
test(() => {
let pseudo = target.pseudo("::before");
let borderQuads = pseudo.getBoxQuads({ box: 'border' });
assert_equals(borderQuads.length, 1);
let bounds = borderQuads[0].getBounds();
// The ::before has width:50px, padding:5px*2=10px, border:2px*2=4px
// So border box width should be 50 + 10 + 4 = 64px
// Height: 30px + 10px + 4px = 44px
assert_equals(bounds.width, 64, 'border box width should include border and padding');
assert_equals(bounds.height, 44, 'border box height should include border and padding');
}, 'getBoxQuads with box="border" returns border box dimensions');
test(() => {
let pseudo = target.pseudo("::before");
let contentQuads = pseudo.getBoxQuads({ box: 'content' });
assert_equals(contentQuads.length, 1);
let bounds = contentQuads[0].getBounds();
// Content box is just width:50px height:30px
assert_equals(bounds.width, 50, 'content box width');
assert_equals(bounds.height, 30, 'content box height');
}, 'getBoxQuads with box="content" returns content box dimensions');
test(() => {
let pseudo = target.pseudo("::before");
let paddingQuads = pseudo.getBoxQuads({ box: 'padding' });
assert_equals(paddingQuads.length, 1);
let bounds = paddingQuads[0].getBounds();
// Padding box: width:50px + 5px*2 = 60px, height:30px + 5px*2 = 40px
assert_equals(bounds.width, 60, 'padding box width');
assert_equals(bounds.height, 40, 'padding box height');
}, 'getBoxQuads with box="padding" returns padding box dimensions');
test(() => {
let pseudo = target.pseudo("::before");
let marginQuads = pseudo.getBoxQuads({ box: 'margin' });
assert_equals(marginQuads.length, 1);
let bounds = marginQuads[0].getBounds();
// Margin box: border box + margins
// Border box: 64x44, margin: 3px*2 = 6px on each axis
assert_equals(bounds.width, 70, 'margin box width');
assert_equals(bounds.height, 50, 'margin box height');
}, 'getBoxQuads with box="margin" returns margin box dimensions');
test(() => {
let pseudo = target.pseudo("::after");
let quads = pseudo.getBoxQuads();
assert_true(quads.length >= 1, 'should return quads for ::after');
}, 'getBoxQuads works for ::after pseudo-element');
</script>
|
