| <!DOCTYPE html> |
| <title>calc-size() on height, with border/padding/margin/box-sizing</title> |
| <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| #container { |
| display: inline-block; |
| font-size: 20px; |
| } |
| #target { |
| width: 123px; |
| border-style: solid; |
| border-width: 1px 20px 3px 20px; |
| padding: 3px 20px 5px 20px; |
| margin: 2px 20px 1px 20px; |
| } |
| #child { |
| width: 20px; |
| height: 7px; |
| } |
| </style> |
| |
| <div id="container"> |
| <div id="target"> |
| <div id="child"></div> |
| </div> |
| </div> |
| |
| <script> |
| |
| let tests = [ |
| { |
| styles: { |
| "height": "auto", |
| }, |
| expected_target_computed: "7px", |
| expected_target_border_box: 19, |
| expected_container: 22, |
| }, |
| { |
| styles: { |
| "height": "auto", |
| "box-sizing": "border-box", |
| }, |
| expected_target_computed: "19px", |
| expected_target_border_box: 19, |
| expected_container: 22, |
| }, |
| { |
| styles: { |
| "height": "calc-size(auto, size)", |
| }, |
| expected_target_computed: "7px", |
| expected_target_border_box: 19, |
| expected_container: 22, |
| }, |
| { |
| styles: { |
| "height": "calc-size(auto, size)", |
| "box-sizing": "border-box", |
| }, |
| expected_target_computed: "19px", |
| expected_target_border_box: 19, |
| expected_container: 22, |
| }, |
| { |
| styles: { |
| "height": "calc-size(auto, size * 2)", |
| }, |
| expected_target_computed: "14px", |
| expected_target_border_box: 26, |
| expected_container: 29, |
| }, |
| { |
| styles: { |
| "height": "calc-size(auto, size * 2)", |
| "box-sizing": "content-box", /* just one test with explicit initial value */ |
| }, |
| expected_target_computed: "14px", |
| expected_target_border_box: 26, |
| expected_container: 29, |
| }, |
| { |
| styles: { |
| "height": "calc-size(auto, size * 2)", |
| "box-sizing": "border-box", |
| }, |
| expected_target_computed: "38px", |
| expected_target_border_box: 38, |
| expected_container: 41, |
| }, |
| { |
| styles: { |
| "height": "calc-size(min-content, size * 2)", |
| }, |
| expected_target_computed: "14px", |
| expected_target_border_box: 26, |
| expected_container: 29, |
| }, |
| { |
| styles: { |
| "height": "calc-size(fit-content, size * 2)", |
| "box-sizing": "border-box", |
| }, |
| expected_target_computed: "38px", |
| expected_target_border_box: 38, |
| expected_container: 41, |
| }, |
| { |
| styles: { |
| "min-height": "calc-size(min-content, size * 2)", |
| }, |
| expected_target_computed: "14px", |
| expected_target_border_box: 26, |
| expected_container: 29, |
| }, |
| { |
| styles: { |
| "min-height": "calc-size(fit-content, size * 2)", |
| "box-sizing": "border-box", |
| }, |
| expected_target_computed: "38px", |
| expected_target_border_box: 38, |
| expected_container: 41, |
| }, |
| { |
| styles: { |
| "height": "200px", |
| "max-height": "calc-size(min-content, size * 2)", |
| }, |
| expected_target_computed: "14px", |
| expected_target_border_box: 26, |
| expected_container: 29, |
| }, |
| { |
| styles: { |
| "height": "200px", |
| "max-height": "calc-size(fit-content, size * 2)", |
| "box-sizing": "border-box", |
| }, |
| expected_target_computed: "38px", |
| expected_target_border_box: 38, |
| expected_container: 41, |
| }, |
| { |
| styles: { |
| "height": "calc-size(11px, size * 2)", |
| }, |
| expected_target_computed: "22px", |
| expected_target_border_box: 34, |
| expected_container: 37, |
| }, |
| { |
| styles: { |
| "height": "calc-size(11px, size * 2)", |
| "box-sizing": "border-box", |
| }, |
| expected_target_computed: "22px", |
| expected_target_border_box: 22, |
| expected_container: 25, |
| }, |
| ]; |
| const container = document.getElementById("container"); |
| const container_cs = getComputedStyle(container); |
| const target = document.getElementById("target"); |
| const target_cs = getComputedStyle(target); |
| for (const obj of tests) { |
| test((t) => { |
| for (const prop in obj.styles) { |
| target.style.setProperty(prop, obj.styles[prop]); |
| } |
| t.add_cleanup(() => { |
| for (const prop in obj.styles) { |
| target.style.removeProperty(prop); |
| } |
| }); |
| assert_equals(target_cs.height, obj.expected_target_computed, |
| "getComputedStyle(target).height"); |
| assert_equals(target.getBoundingClientRect().height, obj.expected_target_border_box, |
| "target.getBoundingClientRect().height"); |
| assert_equals(container_cs.height, `${obj.expected_container}px`, |
| "getComputedStyle(container).height"); |
| assert_equals(container.getBoundingClientRect().height, obj.expected_container, |
| "container.getBoundingClientRect().height"); |
| }, `resolved height with styles ${JSON.stringify(obj.styles)}`); |
| } |
| |
| </script> |
