Skip to content

Commit 244379b

Browse files
TtTRzTtTRz
authored
Merge pull request #22 from ElysiaEgo/feat-block-aspect-ratio
feat: implement aspect ratio for block layout
2 parents 55f7e5f + c7b785c commit 244379b

File tree

3 files changed

+604
-5
lines changed

3 files changed

+604
-5
lines changed

‎float-pigment-forest/tests/custom/css_aspect_ratio.rs

Lines changed: 382 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,3 +297,385 @@ pub fn aspect_ratio_2() {
297297
assert_eq!(child_a.layout_position().height, 100.);
298298
}
299299
}
300+
301+
#[test]
302+
pub fn aspect_ratio_in_block_width_fixed() {
303+
unsafe {
304+
let root = as_ref(Node::new_ptr());
305+
let container = as_ref(Node::new_ptr());
306+
container.set_width(DefLength::Points(Len::from_f32(300.)));
307+
container.set_height(DefLength::Auto);
308+
root.append_child(convert_node_ref_to_ptr(container));
309+
310+
let child = as_ref(Node::new_ptr());
311+
child.set_width(DefLength::Points(Len::from_f32(100.)));
312+
child.set_height(DefLength::Auto);
313+
child.set_aspect_ratio(Some(2. / 1.));
314+
container.append_child(convert_node_ref_to_ptr(child));
315+
316+
let child2 = as_ref(Node::new_ptr());
317+
child2.set_width(DefLength::Points(Len::from_f32(100.)));
318+
child2.set_height(DefLength::Auto);
319+
child2.set_aspect_ratio(Some(0.5 / 1.));
320+
container.append_child(convert_node_ref_to_ptr(child2));
321+
322+
root.layout(
323+
OptionSize::new(OptionNum::some(Len::from_f32(400.)), OptionNum::none()),
324+
Size::new(Len::from_f32(0.), Len::from_f32(0.)),
325+
);
326+
327+
assert_eq!(child.layout_position().width, 100.);
328+
assert_eq!(child.layout_position().height, 50.);
329+
assert_eq!(child2.layout_position().width, 100.);
330+
assert_eq!(child2.layout_position().height, 200.);
331+
}
332+
}
333+
334+
#[test]
335+
pub fn aspect_ratio_in_block_height_fixed() {
336+
unsafe {
337+
let root = as_ref(Node::new_ptr());
338+
let container = as_ref(Node::new_ptr());
339+
container.set_width(DefLength::Auto);
340+
container.set_height(DefLength::Points(Len::from_f32(300.)));
341+
root.append_child(convert_node_ref_to_ptr(container));
342+
343+
let child = as_ref(Node::new_ptr());
344+
child.set_width(DefLength::Auto);
345+
child.set_height(DefLength::Points(Len::from_f32(100.)));
346+
child.set_aspect_ratio(Some(2. / 1.));
347+
container.append_child(convert_node_ref_to_ptr(child));
348+
349+
let child2 = as_ref(Node::new_ptr());
350+
child2.set_width(DefLength::Auto);
351+
child2.set_height(DefLength::Points(Len::from_f32(200.)));
352+
child2.set_aspect_ratio(Some(0.5 / 1.));
353+
container.append_child(convert_node_ref_to_ptr(child2));
354+
355+
root.layout(
356+
OptionSize::new(OptionNum::some(Len::from_f32(400.)), OptionNum::none()),
357+
Size::new(Len::from_f32(0.), Len::from_f32(0.)),
358+
);
359+
360+
assert_eq!(child.layout_position().width, 200.);
361+
assert_eq!(child.layout_position().height, 100.);
362+
assert_eq!(child2.layout_position().width, 100.);
363+
assert_eq!(child2.layout_position().height, 200.);
364+
}
365+
}
366+
367+
// wpt:css/css-sizing/aspect-ratio/block-aspect-ratio-008.html
368+
#[test]
369+
pub fn aspect_ratio_in_parent_block_cross_size_fixed() {
370+
unsafe {
371+
let root = as_ref(Node::new_ptr());
372+
let container = as_ref(Node::new_ptr());
373+
container.set_width(DefLength::Points(Len::from_f32(300.)));
374+
container.set_height(DefLength::Auto);
375+
root.append_child(convert_node_ref_to_ptr(container));
376+
377+
let child = as_ref(Node::new_ptr());
378+
child.set_width(DefLength::Auto);
379+
child.set_aspect_ratio(Some(2. / 1.));
380+
container.append_child(convert_node_ref_to_ptr(child));
381+
382+
let container2 = as_ref(Node::new_ptr());
383+
container2.set_width(DefLength::Auto);
384+
container2.set_height(DefLength::Points(Len::from_f32(300.)));
385+
container2.set_writing_mode(WritingMode::VerticalLr);
386+
root.append_child(convert_node_ref_to_ptr(container2));
387+
388+
let child2 = as_ref(Node::new_ptr());
389+
child2.set_width(DefLength::Auto);
390+
child2.set_aspect_ratio(Some(0.5 / 1.));
391+
container2.append_child(convert_node_ref_to_ptr(child2));
392+
393+
root.layout(
394+
OptionSize::new(OptionNum::some(Len::from_f32(400.)), OptionNum::none()),
395+
Size::new(Len::from_f32(0.), Len::from_f32(0.)),
396+
);
397+
398+
println!(
399+
"{}",
400+
root.dump_to_html(
401+
DumpOptions {
402+
recursive: true,
403+
layout: true,
404+
style: DumpStyleMode::Mutation
405+
},
406+
0
407+
)
408+
);
409+
410+
assert_eq!(child.layout_position().width, 300.);
411+
assert_eq!(child.layout_position().height, 150.);
412+
assert_eq!(child2.layout_position().width, 150.);
413+
assert_eq!(child2.layout_position().height, 300.);
414+
}
415+
}
416+
417+
#[test]
418+
pub fn aspect_ratio_with_min_width_constraint() {
419+
unsafe {
420+
let root = as_ref(Node::new_ptr());
421+
let container = as_ref(Node::new_ptr());
422+
container.set_width(DefLength::Points(Len::from_f32(300.)));
423+
container.set_height(DefLength::Auto);
424+
root.append_child(convert_node_ref_to_ptr(container));
425+
426+
let child = as_ref(Node::new_ptr());
427+
child.set_width(DefLength::Auto);
428+
child.set_height(DefLength::Auto);
429+
child.set_min_width(DefLength::Points(Len::from_f32(400.)));
430+
child.set_aspect_ratio(Some(2. / 1.));
431+
container.append_child(convert_node_ref_to_ptr(child));
432+
433+
root.layout(
434+
OptionSize::new(OptionNum::some(Len::from_f32(200.)), OptionNum::none()),
435+
Size::new(Len::from_f32(0.), Len::from_f32(0.)),
436+
);
437+
438+
println!(
439+
"{}",
440+
root.dump_to_html(
441+
DumpOptions {
442+
recursive: true,
443+
layout: true,
444+
style: DumpStyleMode::Mutation
445+
},
446+
0
447+
)
448+
);
449+
450+
assert_eq!(child.layout_position().width, 400.);
451+
assert_eq!(child.layout_position().height, 200.);
452+
}
453+
}
454+
455+
#[test]
456+
pub fn aspect_ratio_with_max_width_constraint() {
457+
unsafe {
458+
let root = as_ref(Node::new_ptr());
459+
let container = as_ref(Node::new_ptr());
460+
container.set_width(DefLength::Points(Len::from_f32(300.)));
461+
container.set_height(DefLength::Auto);
462+
root.append_child(convert_node_ref_to_ptr(container));
463+
464+
let child = as_ref(Node::new_ptr());
465+
child.set_width(DefLength::Auto);
466+
child.set_height(DefLength::Auto);
467+
child.set_max_width(DefLength::Points(Len::from_f32(80.)));
468+
child.set_aspect_ratio(Some(2. / 1.));
469+
container.append_child(convert_node_ref_to_ptr(child));
470+
471+
root.layout(
472+
OptionSize::new(OptionNum::some(Len::from_f32(200.)), OptionNum::none()),
473+
Size::new(Len::from_f32(0.), Len::from_f32(0.)),
474+
);
475+
476+
println!(
477+
"{}",
478+
root.dump_to_html(
479+
DumpOptions {
480+
recursive: true,
481+
layout: true,
482+
style: DumpStyleMode::Mutation
483+
},
484+
0
485+
)
486+
);
487+
488+
assert_eq!(child.layout_position().width, 80.);
489+
assert_eq!(child.layout_position().height, 40.);
490+
}
491+
}
492+
493+
#[test]
494+
pub fn aspect_ratio_with_max_width_violating_min_height_constraint() {
495+
unsafe {
496+
let root = as_ref(Node::new_ptr());
497+
let container = as_ref(Node::new_ptr());
498+
container.set_width(DefLength::Points(Len::from_f32(300.)));
499+
container.set_height(DefLength::Auto);
500+
root.append_child(convert_node_ref_to_ptr(container));
501+
502+
let child = as_ref(Node::new_ptr());
503+
child.set_width(DefLength::Auto);
504+
child.set_height(DefLength::Auto);
505+
child.set_max_width(DefLength::Points(Len::from_f32(80.)));
506+
child.set_min_height(DefLength::Points(Len::from_f32(100.)));
507+
child.set_aspect_ratio(Some(1. / 1.));
508+
container.append_child(convert_node_ref_to_ptr(child));
509+
510+
root.layout(
511+
OptionSize::new(OptionNum::some(Len::from_f32(200.)), OptionNum::none()),
512+
Size::new(Len::from_f32(0.), Len::from_f32(0.)),
513+
);
514+
515+
println!(
516+
"{}",
517+
root.dump_to_html(
518+
DumpOptions {
519+
recursive: true,
520+
layout: true,
521+
style: DumpStyleMode::Mutation
522+
},
523+
0
524+
)
525+
);
526+
527+
assert_eq!(child.layout_position().width, 80.);
528+
assert_eq!(child.layout_position().height, 100.);
529+
}
530+
}
531+
532+
#[test]
533+
pub fn aspect_ratio_block_size_with_box_sizing() {
534+
unsafe {
535+
let root = as_ref(Node::new_ptr());
536+
let container = as_ref(Node::new_ptr());
537+
container.set_width(DefLength::Points(Len::from_f32(300.)));
538+
container.set_height(DefLength::Auto);
539+
root.append_child(convert_node_ref_to_ptr(container));
540+
541+
let child = as_ref(Node::new_ptr());
542+
child.set_width(DefLength::Auto);
543+
child.set_height(DefLength::Auto);
544+
child.set_width(DefLength::Points(Len::from_f32(50.)));
545+
child.set_padding_left(DefLength::Points(Len::from_f32(30.)));
546+
child.set_border_left(DefLength::Points(Len::from_f32(20.)));
547+
child.set_box_sizing(BoxSizing::BorderBox);
548+
child.set_aspect_ratio(Some(2. / 1.));
549+
container.append_child(convert_node_ref_to_ptr(child));
550+
551+
let child2 = as_ref(Node::new_ptr());
552+
child2.set_width(DefLength::Auto);
553+
child2.set_height(DefLength::Auto);
554+
child2.set_width(DefLength::Points(Len::from_f32(50.)));
555+
child2.set_padding_left(DefLength::Points(Len::from_f32(30.)));
556+
child2.set_border_left(DefLength::Points(Len::from_f32(20.)));
557+
child2.set_box_sizing(BoxSizing::PaddingBox);
558+
child2.set_aspect_ratio(Some(2. / 1.));
559+
container.append_child(convert_node_ref_to_ptr(child2));
560+
561+
let child3 = as_ref(Node::new_ptr());
562+
child3.set_width(DefLength::Auto);
563+
child3.set_height(DefLength::Auto);
564+
child3.set_width(DefLength::Points(Len::from_f32(50.)));
565+
child3.set_padding_left(DefLength::Points(Len::from_f32(30.)));
566+
child3.set_border_left(DefLength::Points(Len::from_f32(20.)));
567+
child3.set_aspect_ratio(Some(2. / 1.));
568+
container.append_child(convert_node_ref_to_ptr(child3));
569+
570+
root.layout(
571+
OptionSize::new(OptionNum::some(Len::from_f32(200.)), OptionNum::none()),
572+
Size::new(Len::from_f32(0.), Len::from_f32(0.)),
573+
);
574+
575+
println!(
576+
"{}",
577+
root.dump_to_html(
578+
DumpOptions {
579+
recursive: true,
580+
layout: true,
581+
style: DumpStyleMode::Mutation
582+
},
583+
0
584+
)
585+
);
586+
587+
assert_eq!(child.layout_position().width, 50.);
588+
assert_eq!(child.layout_position().height, 25.);
589+
assert_eq!(child2.layout_position().width, 80.);
590+
assert_eq!(child2.layout_position().height, 25.);
591+
assert_eq!(child3.layout_position().width, 100.);
592+
assert_eq!(child3.layout_position().height, 25.);
593+
}
594+
}
595+
596+
#[test]
597+
pub fn aspect_ratio_block_size_with_box_sizing_and_writing_mode() {
598+
unsafe {
599+
let root = as_ref(Node::new_ptr());
600+
let container = as_ref(Node::new_ptr());
601+
container.set_width(DefLength::Points(Len::from_f32(300.)));
602+
container.set_height(DefLength::Auto);
603+
container.set_writing_mode(WritingMode::VerticalLr);
604+
root.append_child(convert_node_ref_to_ptr(container));
605+
606+
let child = as_ref(Node::new_ptr());
607+
child.set_width(DefLength::Auto);
608+
child.set_height(DefLength::Auto);
609+
child.set_height(DefLength::Points(Len::from_f32(50.)));
610+
child.set_padding_top(DefLength::Points(Len::from_f32(30.)));
611+
child.set_border_top(DefLength::Points(Len::from_f32(20.)));
612+
child.set_box_sizing(BoxSizing::BorderBox);
613+
child.set_aspect_ratio(Some(2. / 1.));
614+
container.append_child(convert_node_ref_to_ptr(child));
615+
616+
let child2 = as_ref(Node::new_ptr());
617+
child2.set_width(DefLength::Auto);
618+
child2.set_height(DefLength::Auto);
619+
child2.set_height(DefLength::Points(Len::from_f32(50.)));
620+
child2.set_padding_top(DefLength::Points(Len::from_f32(30.)));
621+
child2.set_border_top(DefLength::Points(Len::from_f32(20.)));
622+
child2.set_box_sizing(BoxSizing::PaddingBox);
623+
child2.set_aspect_ratio(Some(2. / 1.));
624+
container.append_child(convert_node_ref_to_ptr(child2));
625+
626+
let child3 = as_ref(Node::new_ptr());
627+
child3.set_width(DefLength::Auto);
628+
child3.set_height(DefLength::Auto);
629+
child3.set_height(DefLength::Points(Len::from_f32(50.)));
630+
child3.set_padding_top(DefLength::Points(Len::from_f32(30.)));
631+
child3.set_border_top(DefLength::Points(Len::from_f32(20.)));
632+
child3.set_aspect_ratio(Some(2. / 1.));
633+
container.append_child(convert_node_ref_to_ptr(child3));
634+
635+
root.layout(
636+
OptionSize::new(OptionNum::some(Len::from_f32(200.)), OptionNum::none()),
637+
Size::new(Len::from_f32(0.), Len::from_f32(0.)),
638+
);
639+
640+
println!(
641+
"{}",
642+
root.dump_to_html(
643+
DumpOptions {
644+
recursive: true,
645+
layout: true,
646+
style: DumpStyleMode::Mutation
647+
},
648+
0
649+
)
650+
);
651+
652+
assert_eq!(child.layout_position().width, 100.);
653+
assert_eq!(child.layout_position().height, 50.);
654+
assert_eq!(child2.layout_position().width, 100.);
655+
assert_eq!(child2.layout_position().height, 80.);
656+
assert_eq!(child3.layout_position().width, 100.);
657+
assert_eq!(child3.layout_position().height, 100.);
658+
}
659+
}
660+
661+
#[test]
662+
pub fn apsect_ratio_writing_mode_streched() {
663+
assert_xml!(
664+
r#"
665+
<div>
666+
<div style="height: 400px; width: 300px;">
667+
<div style="background: red; aspect-ratio: 3 / 1; min-width: 600px" expect_width="600" expect_height="200"></div>
668+
<div style="background: blue; aspect-ratio: 3 / 1; max-width: 60px" expect_width="60" expect_height="20"></div>
669+
</div>
670+
<div style="height: 300px; width: 400px; writing-mode: vertical-lr">
671+
<div style="background: red; aspect-ratio: 1 / 3; min-height: 600px" expect_width="200" expect_height="600"></div>
672+
<div style="background: blue; aspect-ratio: 1 / 3; max-height: 60px" expect_width="20" expect_height="60"></div>
673+
</div>
674+
<div style="height: 300px; width: 400px; writing-mode: vertical-lr">
675+
<div style="background: green; aspect-ratio: 3 / 1; min-height: 500px" expect_width="1500" expect_height="500"></div>
676+
<div style="background: blue; aspect-ratio: 3 / 1; max-height: 90px" expect_width="270" expect_height="90"></div>
677+
</div>
678+
</div>
679+
"#
680+
)
681+
}

0 commit comments

Comments
 (0)