Skip to content

Commit 390a477

Browse files
jogibear9988jogibear9988
committed
Add more Tests for getBoxQuads to return the correct results for complex objects
1 parent ada75ff commit 390a477

File tree

1 file changed

+270
-0
lines changed

1 file changed

+270
-0
lines changed

‎css/cssom-view/cssom-getBoxQuads-003.html‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
<!DOCTYPE html>
2+
<title>CSSOM View - getBoxQuads() returns correct values for different boxes</title>
3+
<link rel="help" href="https://drafts.csswg.org/cssom-view/#the-geometryutils-interface">
4+
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1746794">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<template id="wc-test-template">
8+
<div style="width: 100%; height: 100%; position: absolute">
9+
<div style="z-index: 1; position: absolute; left: 50px; top: 5px; width: 100px; height: 50px; rotate: -45deg; background: lightpink;">WC-test</div>
10+
</div>
11+
</template>
12+
<div id="container" style="position: absolute; left: 100px; top: 400px; opacity: 0.4; overflow: visible;">
13+
ABC
14+
<button style="position: absolute; width: 41px; height: 37px; left: 50px; top: 5px; transform: perspective(50px) rotateX(45deg) ;">Test 2</button>
15+
<button>Test</button>
16+
<button style="position: absolute; left: 50px; top: 50px; transform: perspective(200px) rotateX(45deg) ;">Test 3</button>
17+
<div id="example-element" class="transition-all layer" style="transform-style: flat; background: #623e3f;
18+
border-radius: .75rem;
19+
color: #fff;
20+
transform: perspective(200px) rotateY(30deg);
21+
position: relative;
22+
perspective: 50px;top: 400px;left: 50px;">
23+
<p>Parent</p>
24+
<div style="background-color: #ffba08;
25+
border-radius: .2rem;
26+
color: #000;
27+
margin: 1rem;
28+
padding: .2rem;
29+
transform: rotate3d(1, 1, 1, 45deg);"><code>rotate3d(1, 1, 1, 45deg)</code></div>
30+
</div>
31+
32+
<wc-test style="position: absolute; left: 150px;"></wc-test>
33+
<button style="position: absolute; left: 350px; top: 60px; rotate: 45deg;">Test Rotated</button>
34+
<button
35+
style="position: absolute; left: 350px; top: 360px; rotate: 70deg; width: 200px; height: 100px; padding: 40px; margin: 20px;">Test
36+
Rotated</button>
37+
<button style="position: absolute; left: 50px; top: 140px; width: 200px; height: 100px; padding: 20px;">Test
38+
Padding</button>
39+
<button
40+
style="position: absolute; left: 50px; top: 260px; width: 200px; height: 100px; padding: 20px; border: 15px green solid;">Test
41+
Padding 6 Border</button>
42+
43+
<div
44+
style="position: absolute; left: 500px; top: 40px; width: 200px; height: 100px; background-color: lightgreen; rotate: -30deg;">
45+
<div
46+
style="position: absolute; left: 20px; top: 180px; width: 160px; height: 80px; background-color: lightpink; rotate: -30deg; transform: skewX(30deg) skewY(10deg) scaleY(1.4);">
47+
<button style="position: absolute; left: 120px; top: 140px; padding: 10px; margin: 10px;">Inside of
48+
2 Transformed divs</button>
49+
</div>
50+
</div>
51+
52+
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg"
53+
style="position: absolute; left: 50px; top: 540px;">
54+
<rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
55+
</svg>
56+
57+
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg"
58+
style="position: absolute; left: 50px; top: 940px; rotate: 45deg;">
59+
<rect width="200" height="100" x="30" y="10" rx="20" ry="20" fill="blue" />
60+
</svg>
61+
62+
<div
63+
style="position: absolute; left: 450px; top: 750px; width: 400px; height: 50px; rotate: 45deg; background:lightgray; display: grid; grid-template-columns: 1fr 1fr;">
64+
<button>MathML</button>
65+
<math xmlns="http://www.w3.org/1998/Math/MathML">
66+
<msup>
67+
<mrow>
68+
<mo>(</mo>
69+
<mfrac>
70+
<mrow>
71+
<mn>1</mn>
72+
<mo>+</mo>
73+
<mfrac>
74+
<mn>2</mn>
75+
<mn>3</mn>
76+
</mfrac>
77+
</mrow>
78+
<mn>4</mn>
79+
</mfrac>
80+
<mo>)</mo>
81+
</mrow>
82+
<mn>5</mn>
83+
</msup>
84+
</math>
85+
</div>
86+
87+
<div
88+
style="position: absolute; left: 50px; top: 1240px; width: 400px; height: 100px; rotate: 45deg; background:yellow; display: grid; grid-template-columns: 1fr 1fr;">
89+
<button>Btn</button>
90+
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
91+
<rect width="200" height="100" x="30" y="10" rx="20" ry="20" fill="blue" />
92+
</svg>
93+
</div>
94+
<div
95+
style="position: absolute; left: 50px; top: 1640px; width: 400px; height: 100px; rotate: 75deg; background:yellow; display: grid; grid-template-columns: 1fr 1fr;">
96+
<div
97+
style="position: relative; left: 50px; top: 100px; width: 400px; height: 100px; rotate: 45deg; background:yellow; display: grid; grid-template-columns: 1fr 1fr;">
98+
<button>AaAAAAA</button>
99+
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
100+
<rect width="200" height="100" x="30" y="10" rx="20" ry="20" fill="blue" />
101+
</svg>
102+
</div>
103+
</div>
104+
</div>
105+
<script>
106+
//A webcomponent for test of shadowdom support
107+
let wcContent = null;
108+
customElements.define(
109+
"wc-test",
110+
class WcTest extends HTMLElement {
111+
constructor() {
112+
super();
113+
const shadowRoot = this.attachShadow({ mode: "open" });
114+
const template = (
115+
document.getElementById("wc-test-template")
116+
);
117+
wcContent = template.content.cloneNode(true).children[0];
118+
shadowRoot.appendChild(wcContent);
119+
}
120+
}
121+
);
122+
// End of webcomponent
123+
</script>
124+
<script>
125+
test(function() {
126+
let arr = [...document.querySelectorAll("#container > *")];
127+
let quads = arr.map(x => x.getBoxQuads()[0]);
128+
129+
assert_approx_equals(parseInt(quads[0].p1.x), 154, 2, `getBoxQuads.p1.x should be the correct value`);
130+
assert_approx_equals(parseInt(quads[0].p1.y), 413, 2, `getBoxQuads.p1.y should be the correct value`);
131+
assert_approx_equals(parseInt(quads[0].p2.x), 186, 2, `getBoxQuads.p2.x should be the correct value`);
132+
assert_approx_equals(parseInt(quads[0].p2.y), 413, 2, `getBoxQuads.p2.y should be the correct value`);
133+
assert_approx_equals(parseInt(quads[0].p3.x), 198, 2, `getBoxQuads.p3.x should be the correct value`);
134+
assert_approx_equals(parseInt(quads[0].p3.y), 441, 2, `getBoxQuads.p3.y should be the correct value`);
135+
assert_approx_equals(parseInt(quads[0].p4.x), 142, 2, `getBoxQuads.p4.x should be the correct value`);
136+
assert_approx_equals(parseInt(quads[0].p4.y), 441, 2, `getBoxQuads.p4.y should be the correct value`);
137+
assert_approx_equals(parseInt(quads[1].p1.x), 136, 2, `getBoxQuads.p1.x should be the correct value`);
138+
assert_approx_equals(parseInt(quads[1].p1.y), 400, 2, `getBoxQuads.p1.y should be the correct value`);
139+
assert_approx_equals(parseInt(quads[1].p2.x), 172, 2, `getBoxQuads.p2.x should be the correct value`);
140+
assert_approx_equals(parseInt(quads[1].p2.y), 400, 2, `getBoxQuads.p2.y should be the correct value`);
141+
assert_approx_equals(parseInt(quads[1].p3.x), 172, 2, `getBoxQuads.p3.x should be the correct value`);
142+
assert_approx_equals(parseInt(quads[1].p3.y), 422, 2, `getBoxQuads.p3.y should be the correct value`);
143+
assert_approx_equals(parseInt(quads[1].p4.x), 136, 2, `getBoxQuads.p4.x should be the correct value`);
144+
assert_approx_equals(parseInt(quads[1].p4.y), 422, 2, `getBoxQuads.p4.y should be the correct value`);
145+
assert_approx_equals(parseInt(quads[2].p1.x), 150, 2, `getBoxQuads.p1.x should be the correct value`);
146+
assert_approx_equals(parseInt(quads[2].p1.y), 453, 2, `getBoxQuads.p1.y should be the correct value`);
147+
assert_approx_equals(parseInt(quads[2].p2.x), 196, 2, `getBoxQuads.p2.x should be the correct value`);
148+
assert_approx_equals(parseInt(quads[2].p2.y), 453, 2, `getBoxQuads.p2.y should be the correct value`);
149+
assert_approx_equals(parseInt(quads[2].p3.x), 198, 2, `getBoxQuads.p3.x should be the correct value`);
150+
assert_approx_equals(parseInt(quads[2].p3.y), 469, 2, `getBoxQuads.p3.y should be the correct value`);
151+
assert_approx_equals(parseInt(quads[2].p4.x), 149, 2, `getBoxQuads.p4.x should be the correct value`);
152+
assert_approx_equals(parseInt(quads[2].p4.y), 469, 2, `getBoxQuads.p4.y should be the correct value`);
153+
assert_approx_equals(parseInt(quads[3].p1.x), 131, 2, `getBoxQuads.p1.x should be the correct value`);
154+
assert_approx_equals(parseInt(quads[3].p1.y), 827, 2, `getBoxQuads.p1.y should be the correct value`);
155+
assert_approx_equals(parseInt(quads[3].p2.x), 327, 2, `getBoxQuads.p2.x should be the correct value`);
156+
assert_approx_equals(parseInt(quads[3].p2.y), 844, 2, `getBoxQuads.p2.y should be the correct value`);
157+
assert_approx_equals(parseInt(quads[3].p3.x), 327, 2, `getBoxQuads.p3.x should be the correct value`);
158+
assert_approx_equals(parseInt(quads[3].p3.y), 890, 2, `getBoxQuads.p3.y should be the correct value`);
159+
assert_approx_equals(parseInt(quads[3].p4.x), 131, 2, `getBoxQuads.p4.x should be the correct value`);
160+
assert_approx_equals(parseInt(quads[3].p4.y), 906, 2, `getBoxQuads.p4.y should be the correct value`);
161+
assert_approx_equals(parseInt(quads[4].p1.x), 250, 2, `getBoxQuads.p1.x should be the correct value`);
162+
assert_approx_equals(parseInt(quads[4].p1.y), 512, 2, `getBoxQuads.p1.y should be the correct value`);
163+
assert_approx_equals(parseInt(quads[4].p2.x), 250, 2, `getBoxQuads.p2.x should be the correct value`);
164+
assert_approx_equals(parseInt(quads[4].p2.y), 512, 2, `getBoxQuads.p2.y should be the correct value`);
165+
assert_approx_equals(parseInt(quads[4].p3.x), 250, 2, `getBoxQuads.p3.x should be the correct value`);
166+
assert_approx_equals(parseInt(quads[4].p3.y), 512, 2, `getBoxQuads.p3.y should be the correct value`);
167+
assert_approx_equals(parseInt(quads[4].p4.x), 250, 2, `getBoxQuads.p4.x should be the correct value`);
168+
assert_approx_equals(parseInt(quads[4].p4.y), 512, 2, `getBoxQuads.p4.y should be the correct value`);
169+
assert_approx_equals(parseInt(quads[5].p1.x), 471, 2, `getBoxQuads.p1.x should be the correct value`);
170+
assert_approx_equals(parseInt(quads[5].p1.y), 445, 2, `getBoxQuads.p1.y should be the correct value`);
171+
assert_approx_equals(parseInt(quads[5].p2.x), 512, 2, `getBoxQuads.p2.x should be the correct value`);
172+
assert_approx_equals(parseInt(quads[5].p2.y), 485, 2, `getBoxQuads.p2.y should be the correct value`);
173+
assert_approx_equals(parseInt(quads[5].p3.x), 485, 2, `getBoxQuads.p3.x should be the correct value`);
174+
assert_approx_equals(parseInt(quads[5].p3.y), 512, 2, `getBoxQuads.p3.y should be the correct value`);
175+
assert_approx_equals(parseInt(quads[5].p4.x), 444, 2, `getBoxQuads.p4.x should be the correct value`);
176+
assert_approx_equals(parseInt(quads[5].p4.y), 472, 2, `getBoxQuads.p4.y should be the correct value`);
177+
assert_approx_equals(parseInt(quads[6].p1.x), 582, 2, `getBoxQuads.p1.x should be the correct value`);
178+
assert_approx_equals(parseInt(quads[6].p1.y), 718, 2, `getBoxQuads.p1.y should be the correct value`);
179+
assert_approx_equals(parseInt(quads[6].p2.x), 651, 2, `getBoxQuads.p2.x should be the correct value`);
180+
assert_approx_equals(parseInt(quads[6].p2.y), 906, 2, `getBoxQuads.p2.y should be the correct value`);
181+
assert_approx_equals(parseInt(quads[6].p3.x), 557, 2, `getBoxQuads.p3.x should be the correct value`);
182+
assert_approx_equals(parseInt(quads[6].p3.y), 941, 2, `getBoxQuads.p3.y should be the correct value`);
183+
assert_approx_equals(parseInt(quads[6].p4.x), 488, 2, `getBoxQuads.p4.x should be the correct value`);
184+
assert_approx_equals(parseInt(quads[6].p4.y), 753, 2, `getBoxQuads.p4.y should be the correct value`);
185+
assert_approx_equals(parseInt(quads[7].p1.x), 150, 2, `getBoxQuads.p1.x should be the correct value`);
186+
assert_approx_equals(parseInt(quads[7].p1.y), 540, 2, `getBoxQuads.p1.y should be the correct value`);
187+
assert_approx_equals(parseInt(quads[7].p2.x), 350, 2, `getBoxQuads.p2.x should be the correct value`);
188+
assert_approx_equals(parseInt(quads[7].p2.y), 540, 2, `getBoxQuads.p2.y should be the correct value`);
189+
assert_approx_equals(parseInt(quads[7].p3.x), 350, 2, `getBoxQuads.p3.x should be the correct value`);
190+
assert_approx_equals(parseInt(quads[7].p3.y), 640, 2, `getBoxQuads.p3.y should be the correct value`);
191+
assert_approx_equals(parseInt(quads[7].p4.x), 150, 2, `getBoxQuads.p4.x should be the correct value`);
192+
assert_approx_equals(parseInt(quads[7].p4.y), 640, 2, `getBoxQuads.p4.y should be the correct value`);
193+
assert_approx_equals(parseInt(quads[8].p1.x), 150, 2, `getBoxQuads.p1.x should be the correct value`);
194+
assert_approx_equals(parseInt(quads[8].p1.y), 660, 2, `getBoxQuads.p1.y should be the correct value`);
195+
assert_approx_equals(parseInt(quads[8].p2.x), 350, 2, `getBoxQuads.p2.x should be the correct value`);
196+
assert_approx_equals(parseInt(quads[8].p2.y), 660, 2, `getBoxQuads.p2.y should be the correct value`);
197+
assert_approx_equals(parseInt(quads[8].p3.x), 350, 2, `getBoxQuads.p3.x should be the correct value`);
198+
assert_approx_equals(parseInt(quads[8].p3.y), 760, 2, `getBoxQuads.p3.y should be the correct value`);
199+
assert_approx_equals(parseInt(quads[8].p4.x), 150, 2, `getBoxQuads.p4.x should be the correct value`);
200+
assert_approx_equals(parseInt(quads[8].p4.y), 760, 2, `getBoxQuads.p4.y should be the correct value`);
201+
assert_approx_equals(parseInt(quads[9].p1.x), 588, 2, `getBoxQuads.p1.x should be the correct value`);
202+
assert_approx_equals(parseInt(quads[9].p1.y), 496, 2, `getBoxQuads.p1.y should be the correct value`);
203+
assert_approx_equals(parseInt(quads[9].p2.x), 761, 2, `getBoxQuads.p2.x should be the correct value`);
204+
assert_approx_equals(parseInt(quads[9].p2.y), 396, 2, `getBoxQuads.p2.y should be the correct value`);
205+
assert_approx_equals(parseInt(quads[9].p3.x), 811, 2, `getBoxQuads.p3.x should be the correct value`);
206+
assert_approx_equals(parseInt(quads[9].p3.y), 483, 2, `getBoxQuads.p3.y should be the correct value`);
207+
assert_approx_equals(parseInt(quads[9].p4.x), 638, 2, `getBoxQuads.p4.x should be the correct value`);
208+
assert_approx_equals(parseInt(quads[9].p4.y), 583, 2, `getBoxQuads.p4.y should be the correct value`);
209+
assert_approx_equals(parseInt(quads[10].p1.x), 150, 2, `getBoxQuads.p1.x should be the correct value`);
210+
assert_approx_equals(parseInt(quads[10].p1.y), 940, 2, `getBoxQuads.p1.y should be the correct value`);
211+
assert_approx_equals(parseInt(quads[10].p2.x), 450, 2, `getBoxQuads.p2.x should be the correct value`);
212+
assert_approx_equals(parseInt(quads[10].p2.y), 940, 2, `getBoxQuads.p2.y should be the correct value`);
213+
assert_approx_equals(parseInt(quads[10].p3.x), 450, 2, `getBoxQuads.p3.x should be the correct value`);
214+
assert_approx_equals(parseInt(quads[10].p3.y), 1070, 2, `getBoxQuads.p3.y should be the correct value`);
215+
assert_approx_equals(parseInt(quads[10].p4.x), 150, 2, `getBoxQuads.p4.x should be the correct value`);
216+
assert_approx_equals(parseInt(quads[10].p4.y), 1070, 2, `getBoxQuads.p4.y should be the correct value`);
217+
assert_approx_equals(parseInt(quads[11].p1.x), 239, 2, `getBoxQuads.p1.x should be the correct value`);
218+
assert_approx_equals(parseInt(quads[11].p1.y), 1252, 2, `getBoxQuads.p1.y should be the correct value`);
219+
assert_approx_equals(parseInt(quads[11].p2.x), 452, 2, `getBoxQuads.p2.x should be the correct value`);
220+
assert_approx_equals(parseInt(quads[11].p2.y), 1465, 2, `getBoxQuads.p2.y should be the correct value`);
221+
assert_approx_equals(parseInt(quads[11].p3.x), 360, 2, `getBoxQuads.p3.x should be the correct value`);
222+
assert_approx_equals(parseInt(quads[11].p3.y), 1557, 2, `getBoxQuads.p3.y should be the correct value`);
223+
assert_approx_equals(parseInt(quads[11].p4.x), 147, 2, `getBoxQuads.p4.x should be the correct value`);
224+
assert_approx_equals(parseInt(quads[11].p4.y), 1344, 2, `getBoxQuads.p4.y should be the correct value`);
225+
assert_approx_equals(parseInt(quads[12].p1.x), 626, 2, `getBoxQuads.p1.x should be the correct value`);
226+
assert_approx_equals(parseInt(quads[12].p1.y), 1015, 2, `getBoxQuads.p1.y should be the correct value`);
227+
assert_approx_equals(parseInt(quads[12].p2.x), 909, 2, `getBoxQuads.p2.x should be the correct value`);
228+
assert_approx_equals(parseInt(quads[12].p2.y), 1298, 2, `getBoxQuads.p2.y should be the correct value`);
229+
assert_approx_equals(parseInt(quads[12].p3.x), 873, 2, `getBoxQuads.p3.x should be the correct value`);
230+
assert_approx_equals(parseInt(quads[12].p3.y), 1334, 2, `getBoxQuads.p3.y should be the correct value`);
231+
assert_approx_equals(parseInt(quads[12].p4.x), 590, 2, `getBoxQuads.p4.x should be the correct value`);
232+
assert_approx_equals(parseInt(quads[12].p4.y), 1051, 2, `getBoxQuads.p4.y should be the correct value`);
233+
assert_approx_equals(parseInt(quads[13].p1.x), 243, 2, `getBoxQuads.p1.x should be the correct value`);
234+
assert_approx_equals(parseInt(quads[13].p1.y), 1513, 2, `getBoxQuads.p1.y should be the correct value`);
235+
assert_approx_equals(parseInt(quads[13].p2.x), 526, 2, `getBoxQuads.p2.x should be the correct value`);
236+
assert_approx_equals(parseInt(quads[13].p2.y), 1796, 2, `getBoxQuads.p2.y should be the correct value`);
237+
assert_approx_equals(parseInt(quads[13].p3.x), 456, 2, `getBoxQuads.p3.x should be the correct value`);
238+
assert_approx_equals(parseInt(quads[13].p3.y), 1866, 2, `getBoxQuads.p3.y should be the correct value`);
239+
assert_approx_equals(parseInt(quads[13].p4.x), 173, 2, `getBoxQuads.p4.x should be the correct value`);
240+
assert_approx_equals(parseInt(quads[13].p4.y), 1583, 2, `getBoxQuads.p4.y should be the correct value`);
241+
assert_approx_equals(parseInt(quads[14].p1.x), 346, 2, `getBoxQuads.p1.x should be the correct value`);
242+
assert_approx_equals(parseInt(quads[14].p1.y), 1883, 2, `getBoxQuads.p1.y should be the correct value`);
243+
assert_approx_equals(parseInt(quads[14].p2.x), 450, 2, `getBoxQuads.p2.x should be the correct value`);
244+
assert_approx_equals(parseInt(quads[14].p2.y), 2270, 2, `getBoxQuads.p2.y should be the correct value`);
245+
assert_approx_equals(parseInt(quads[14].p3.x), 353, 2, `getBoxQuads.p3.x should be the correct value`);
246+
assert_approx_equals(parseInt(quads[14].p3.y), 2296, 2, `getBoxQuads.p3.y should be the correct value`);
247+
assert_approx_equals(parseInt(quads[14].p4.x), 249, 2, `getBoxQuads.p4.x should be the correct value`);
248+
assert_approx_equals(parseInt(quads[14].p4.y), 1909, 2, `getBoxQuads.p4.y should be the correct value`);
249+
250+
251+
252+
/* build assert cases */
253+
/*
254+
let t = '';
255+
for (let i=0;i<arr.length;i++) {
256+
let e=quads[i]
257+
258+
t += 'assert_approx_equals(parseInt(quads['+i+'].p1.x), ' + parseInt(e.p1.x)+', 2, `getBoxQuads.p1.x should be the correct value`);\n';
259+
t += 'assert_approx_equals(parseInt(quads['+i+'].p1.y), ' + parseInt(e.p1.y)+', 2, `getBoxQuads.p1.y should be the correct value`);\n';
260+
t += 'assert_approx_equals(parseInt(quads['+i+'].p2.x), ' + parseInt(e.p2.x)+', 2, `getBoxQuads.p2.x should be the correct value`);\n';
261+
t += 'assert_approx_equals(parseInt(quads['+i+'].p2.y), ' + parseInt(e.p2.y)+', 2, `getBoxQuads.p2.y should be the correct value`);\n';
262+
t += 'assert_approx_equals(parseInt(quads['+i+'].p3.x), ' + parseInt(e.p3.x)+', 2, `getBoxQuads.p3.x should be the correct value`);\n';
263+
t += 'assert_approx_equals(parseInt(quads['+i+'].p3.y), ' + parseInt(e.p3.y)+', 2, `getBoxQuads.p3.y should be the correct value`);\n';
264+
t += 'assert_approx_equals(parseInt(quads['+i+'].p4.x), ' + parseInt(e.p4.x)+', 2, `getBoxQuads.p4.x should be the correct value`);\n';
265+
t += 'assert_approx_equals(parseInt(quads['+i+'].p4.y), ' + parseInt(e.p4.y)+', 2, `getBoxQuads.p4.y should be the correct value`);\n';
266+
}
267+
debugger;
268+
*/
269+
});
270+
</script>

0 commit comments

Comments
 (0)