Skip to content

Commit 1fe8f02

Browse files
author
juvanhe
committed
feat: implement aspect ratio for block layout
1 parent 55f7e5f commit 1fe8f02

File tree

3 files changed

+537
-5
lines changed

3 files changed

+537
-5
lines changed

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

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

0 commit comments

Comments
 (0)