mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: div block size aspect ratio precision</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="Verify the calculations are correct for a fractional aspect ratio.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="display: inline-block;background: green; height: 100px; aspect-ratio: 0.7;"></div><div style="display: inline-block;background: green; height: 100px; width: 30px;"></div>
|
||||
|
|
@ -10,8 +10,9 @@
|
|||
|
||||
<div style="display: flex;">
|
||||
<!-- No transferred size suggestion since the flex item is non-replaced.
|
||||
Content size suggestion is 100px. -->
|
||||
Content size suggestion is 50px because 50px is item's min-content size. -->
|
||||
<div style="background: green; height: 100px; aspect-ratio: 1/2; flex-basis: 0;">
|
||||
<div style="width: 100px;"></div>
|
||||
</div>
|
||||
<div style="background: green; height: 100px; width: 50px;"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@
|
|||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; width: 100px; height:50px;"></div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<!-- No transferred size suggestion since the flex item is non-replaced.
|
||||
Content size suggestion is 100px. -->
|
||||
Content size suggestion is 50px because min-content size is 50px. -->
|
||||
<div style="background: green; width: 100px; aspect-ratio: 2/1; flex-basis: 0;">
|
||||
<div style="height: 100px;"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<title>aspect-ratio flex item</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-automatic">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="There's enough space for padding after transferring flex-imposed definite height through the aspect ratio for a border-box flex item.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="display: flex; height: 50px;">
|
||||
<div style="padding-left: 100px; box-sizing: border-box; aspect-ratio: 1/1; background: green;"></div>
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px; background: green"></div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<title>aspect-ratio flex item</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="Item's final height is definite when the flex base size is definite because it derives from item's aspect ratio and stretched width, not from layout">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="display: flex; flex-direction: column; width: 100px;">
|
||||
<div style="aspect-ratio: 1/1; background: red;">
|
||||
<div style="height: 100%; background: green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<title>aspect-ratio flex item</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="Item's final height is definite when the flex base size is definite because it derives from item's aspect ratio and specified width, not from layout">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<div style="aspect-ratio: 1/1; background: red; width: 100px;">
|
||||
<div style="height: 100%; background: green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,6 +14,6 @@ div {
|
|||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="height: 50px; width: -moz-fit-content; width: fit-content;"></div>
|
||||
<div style="height: 50px; width: fit-content;"></div>
|
||||
<!-- fit-content in the block axis is treated as auto -->
|
||||
<div style="height: -moz-fit-content; height: fit-content; width: 100px;"></div>
|
||||
<div style="height: fit-content; width: 100px;"></div>
|
||||
|
|
|
|||
|
|
@ -12,13 +12,9 @@ div {
|
|||
white-space: pre;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
.min > div {
|
||||
width: -moz-min-content;
|
||||
width: -webkit-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,13 +15,9 @@ div {
|
|||
border: 5px solid blue;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
.min > div {
|
||||
width: -moz-min-content;
|
||||
width: -webkit-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ div {
|
|||
white-space: pre;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,13 +16,9 @@ div {
|
|||
white-space: nowrap;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
.min > div {
|
||||
width: -moz-min-content;
|
||||
width: -webkit-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ div {
|
|||
white-space: pre;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,13 +16,9 @@ div {
|
|||
white-space: nowrap;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
.min > div {
|
||||
width: -moz-min-content;
|
||||
width: -webkit-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<body></body>
|
||||
|
||||
<script>
|
||||
// auto doesn't interpolate
|
||||
// none doesn't interpolate
|
||||
test_interpolation({
|
||||
property: 'contain-intrinsic-size',
|
||||
from: neutralKeyframe,
|
||||
|
|
@ -50,14 +50,45 @@ test_no_interpolation({
|
|||
|
||||
test_no_interpolation({
|
||||
property: 'contain-intrinsic-size',
|
||||
from: 'auto',
|
||||
from: 'none',
|
||||
to: '20px 20px',
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'contain-intrinsic-size',
|
||||
from: '10px 15px',
|
||||
to: 'auto',
|
||||
to: 'none',
|
||||
});
|
||||
|
||||
test_interpolation({
|
||||
property: 'contain-intrinsic-size',
|
||||
from: 'auto 0px 0px',
|
||||
to: 'auto 10px 10px'
|
||||
}, [
|
||||
{at: -0.3, expect: 'auto 0px 0px'}, // contain-intrinsic-size can't be negative.
|
||||
{at: 0, expect: 'auto 0px 0px'},
|
||||
{at: 0.3, expect: 'auto 3px 3px'},
|
||||
{at: 0.6, expect: 'auto 6px 6px'},
|
||||
{at: 1, expect: 'auto 10px 10px'},
|
||||
{at: 1.5, expect: 'auto 15px 15px'}
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'contain-intrinsic-size',
|
||||
from: 'auto 10px 15px',
|
||||
to: '20px 15px',
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'contain-intrinsic-size',
|
||||
from: 'none 15px',
|
||||
to: '20px 15px',
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'contain-intrinsic-size',
|
||||
from: 'none 15px',
|
||||
to: 'auto 20px 15px',
|
||||
});
|
||||
|
||||
test_interpolation({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div style="height: 2000px;"></div>
|
||||
|
||||
<div style="contain-intrinsic-size: auto 1px;" id="test">
|
||||
<div style="height: 50px;"></div> <!-- make 'test' have a 50px height -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function finalize() {
|
||||
el.style.contentVisibility = "auto";
|
||||
log.innerText = el.offsetHeight;
|
||||
assert_equals(el.offsetHeight, 50);
|
||||
}
|
||||
|
||||
var t = async_test("contain-intrinsic-size: auto");
|
||||
|
||||
var log = document.getElementById("log");
|
||||
var el = document.getElementById("test");
|
||||
var observer = new ResizeObserver(function() {
|
||||
requestAnimationFrame(t.step_func_done(finalize));
|
||||
observer.unobserve(el);
|
||||
});
|
||||
|
||||
observer.observe(el);
|
||||
el.offsetWidth;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain-intrinsic-size: auto with a vertical writing mode</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div style="height: 2000px;"></div>
|
||||
|
||||
<div style="contain-intrinsic-size: auto 1px;" id="test">
|
||||
<div style="height: 50px; writing-mode: vertical-lr;"></div> <!-- make 'test' have a 50px height -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function finalize() {
|
||||
el.style.contentVisibility = "auto";
|
||||
log.innerText = el.offsetHeight;
|
||||
assert_equals(el.offsetHeight, 50);
|
||||
}
|
||||
|
||||
var t = async_test("contain-intrinsic-size: auto");
|
||||
|
||||
var log = document.getElementById("log");
|
||||
var el = document.getElementById("test");
|
||||
var observer = new ResizeObserver(function() {
|
||||
requestAnimationFrame(t.step_func_done(finalize));
|
||||
observer.unobserve(el);
|
||||
});
|
||||
|
||||
observer.observe(el);
|
||||
el.offsetWidth;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain-intrinsic-size: auto with various dynamic changes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div style="height: 2000px;"></div>
|
||||
|
||||
<div style="contain-intrinsic-size: auto 1px; contain: size;" id="test">
|
||||
<div style="height: 50px;" id="child"></div> <!-- make 'test' have a 50px height -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var next_func;
|
||||
|
||||
var t = async_test("contain-intrinsic-size: auto");
|
||||
|
||||
var log = document.getElementById("log");
|
||||
var el = document.getElementById("test");
|
||||
var child = document.getElementById("child");
|
||||
var observer = new ResizeObserver(function() {
|
||||
requestAnimationFrame(next_func);
|
||||
observer.unobserve(el);
|
||||
});
|
||||
|
||||
function step2() {
|
||||
el.style.contentVisibility = "auto";
|
||||
el.style.contain = "size";
|
||||
assert_equals(el.offsetHeight, 50);
|
||||
child.style.height = "30px";
|
||||
// We should still use the old saved size.
|
||||
assert_equals(el.offsetHeight, 50);
|
||||
|
||||
el.style.contentVisibility = "";
|
||||
el.style.contain = "";
|
||||
assert_equals(el.offsetHeight, 30);
|
||||
|
||||
// Need to let resize observer run again to update the size.
|
||||
next_func = t.step_func_done(finalize);
|
||||
observer.observe(el);
|
||||
}
|
||||
|
||||
function finalize() {
|
||||
el.style.contentVisibility = "auto";
|
||||
el.style.contain = "size";
|
||||
assert_equals(el.offsetHeight, 30);
|
||||
}
|
||||
|
||||
|
||||
el.offsetWidth;
|
||||
t.step(function() {
|
||||
assert_equals(el.offsetHeight, 1);
|
||||
el.style.contain = "";
|
||||
assert_equals(el.offsetHeight, 50);
|
||||
|
||||
// Let ResizeObserver run so that the size gets saved.
|
||||
next_func = t.step_func(step2);
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<title>Tests that contain-intrinsic-size: auto only works with content-visibility: auto, not just size containment</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div style="height: 2000px;"></div>
|
||||
|
||||
<div style="contain-intrinsic-size: auto 1px;" id="test">
|
||||
<div style="height: 50px;"></div> <!-- make 'test' have a 50px height -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function finalize() {
|
||||
el.style.contain = "size";
|
||||
log.innerText = el.offsetHeight;
|
||||
// No content-visibility: auto, so this should remain 1.
|
||||
assert_equals(el.offsetHeight, 1);
|
||||
}
|
||||
|
||||
var t = async_test("contain-intrinsic-size: auto");
|
||||
|
||||
var log = document.getElementById("log");
|
||||
var el = document.getElementById("test");
|
||||
var observer = new ResizeObserver(function() {
|
||||
requestAnimationFrame(t.step_func_done(finalize));
|
||||
observer.unobserve(el);
|
||||
});
|
||||
|
||||
observer.observe(el);
|
||||
el.offsetWidth;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<title>Tests that contain-intrinsic-size: auto only works with content-visibility: auto, not just hidden visibility</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div style="height: 2000px;"></div>
|
||||
|
||||
<div style="contain-intrinsic-size: auto 1px;" id="test">
|
||||
<div style="height: 50px;"></div> <!-- make 'test' have a 50px height -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function finalize() {
|
||||
el.style.contain = "size";
|
||||
el.style.contentVisibility = "hidden";
|
||||
log.innerText = el.offsetHeight;
|
||||
// No content-visibility: auto, so this should remain 1.
|
||||
assert_equals(el.offsetHeight, 1);
|
||||
}
|
||||
|
||||
var t = async_test("contain-intrinsic-size: auto");
|
||||
|
||||
var log = document.getElementById("log");
|
||||
var el = document.getElementById("test");
|
||||
var observer = new ResizeObserver(function() {
|
||||
requestAnimationFrame(t.step_func_done(finalize));
|
||||
observer.unobserve(el);
|
||||
});
|
||||
|
||||
observer.observe(el);
|
||||
el.offsetWidth;
|
||||
|
||||
</script>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<title>CSS Intrinsic Size Test: intrinsic-size with computed values</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<meta name="assert" content="contain-intrinsic-size supports the full grammar '[auto | <length>]{1,2}'.">
|
||||
<meta name="assert" content="contain-intrinsic-size supports the full grammar '[none | <length>]{1,2}'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
|
|
@ -20,19 +20,24 @@ function length_ref(length) {
|
|||
return getComputedStyle(document.getElementById("scratch")).getPropertyValue("width");
|
||||
}
|
||||
|
||||
test_computed_value("contain-intrinsic-size", "auto");
|
||||
test_computed_value("contain-intrinsic-size", "none");
|
||||
test_computed_value("contain-intrinsic-size", "1px");
|
||||
test_computed_value("contain-intrinsic-size", "auto 1px");
|
||||
test_computed_value("contain-intrinsic-size", "auto 1px auto 1px", "auto 1px");
|
||||
test_computed_value("contain-intrinsic-size", "1px auto 1px");
|
||||
test_computed_value("contain-intrinsic-size", "2vw 3px", length_ref("2vw") + " 3px");
|
||||
test_computed_value("contain-intrinsic-size", "2px 3vh", "2px " + length_ref("3vh"));
|
||||
test_computed_value("contain-intrinsic-size", "5px 5px", "5px");
|
||||
|
||||
test_computed_value("contain-intrinsic-width", "auto");
|
||||
test_computed_value("contain-intrinsic-width", "none");
|
||||
test_computed_value("contain-intrinsic-width", "1px");
|
||||
test_computed_value("contain-intrinsic-width", "auto 1px");
|
||||
test_computed_value("contain-intrinsic-width", "2vw", length_ref("2vw"));
|
||||
test_computed_value("contain-intrinsic-width", "3vh", length_ref("3vh"));
|
||||
|
||||
test_computed_value("contain-intrinsic-height", "auto");
|
||||
test_computed_value("contain-intrinsic-height", "none");
|
||||
test_computed_value("contain-intrinsic-height", "1px");
|
||||
test_computed_value("contain-intrinsic-height", "auto 1px");
|
||||
test_computed_value("contain-intrinsic-height", "2vw", length_ref("2vw"));
|
||||
test_computed_value("contain-intrinsic-height", "3vh", length_ref("3vh"));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<title>CSS Intrinsic Size Test: intrinsic-size with invalid values</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<meta name="assert" content="contain-intrinsic-size supports the full grammar '[auto | <length>]{1,2}'.">
|
||||
<meta name="assert" content="contain-intrinsic-size supports the full grammar 'none | [auto || <length> | <length>]{1,2}'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
|
|
@ -20,30 +20,41 @@ test_invalid_value("contain-intrinsic-size", "2em 3px 5px");
|
|||
test_invalid_value("contain-intrinsic-size", "1px 1%");
|
||||
test_invalid_value("contain-intrinsic-size", "1px auto auto");
|
||||
test_invalid_value("contain-intrinsic-size", "-1px");
|
||||
test_invalid_value("contain-intrinsic-size", "auto");
|
||||
test_invalid_value("contain-intrinsic-size", "auto 1px 1px auto");
|
||||
test_invalid_value("contain-intrinsic-size", "1px 1px auto");
|
||||
|
||||
test_invalid_value("contain-intrinsic-width", "legacy");
|
||||
test_invalid_value("contain-intrinsic-width", "-1px");
|
||||
test_invalid_value("contain-intrinsic-width", "1px 1px");
|
||||
test_invalid_value("contain-intrinsic-width", "1px auto");
|
||||
test_invalid_value("contain-intrinsic-width", "1px none");
|
||||
test_invalid_value("contain-intrinsic-width", "auto 1px auto");
|
||||
test_invalid_value("contain-intrinsic-width", "20%");
|
||||
test_invalid_value("contain-intrinsic-width", "1px auto");
|
||||
|
||||
test_invalid_value("contain-intrinsic-height", "legacy");
|
||||
test_invalid_value("contain-intrinsic-height", "-1px");
|
||||
test_invalid_value("contain-intrinsic-height", "1px 1px");
|
||||
test_invalid_value("contain-intrinsic-height", "1px auto");
|
||||
test_invalid_value("contain-intrinsic-height", "1px none");
|
||||
test_invalid_value("contain-intrinsic-height", "auto 1px auto");
|
||||
test_invalid_value("contain-intrinsic-height", "20%");
|
||||
test_invalid_value("contain-intrinsic-height", "1px auto");
|
||||
|
||||
test_invalid_value("contain-intrinsic-inline-size", "legacy");
|
||||
test_invalid_value("contain-intrinsic-inline-size", "-1px");
|
||||
test_invalid_value("contain-intrinsic-inline-size", "1px 1px");
|
||||
test_invalid_value("contain-intrinsic-inline-size", "1px auto");
|
||||
test_invalid_value("contain-intrinsic-inline-size", "1px none");
|
||||
test_invalid_value("contain-intrinsic-inline-size", "auto 1px auto");
|
||||
test_invalid_value("contain-intrinsic-inline-size", "20%");
|
||||
test_invalid_value("contain-intrinsic-inline-size", "1px auto");
|
||||
|
||||
test_invalid_value("contain-intrinsic-block-size", "legacy");
|
||||
test_invalid_value("contain-intrinsic-block-size", "-1px");
|
||||
test_invalid_value("contain-intrinsic-block-size", "1px 1px");
|
||||
test_invalid_value("contain-intrinsic-block-size", "1px auto");
|
||||
test_invalid_value("contain-intrinsic-block-size", "1px none");
|
||||
test_invalid_value("contain-intrinsic-block-size", "auto 1px auto");
|
||||
test_invalid_value("contain-intrinsic-block-size", "20%");
|
||||
test_invalid_value("contain-intrinsic-block-size", "1px auto");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,36 +5,43 @@
|
|||
<title>CSS Intrinsic Size Test: intrinsic-size with valid values</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<meta name="assert" content="contain-intrinsic-size supports the full grammar '[auto | <length>]{1,2}'.">
|
||||
<meta name="assert" content="contain-intrinsic-size supports the full grammar '[none | <length>]{1,2}'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("contain-intrinsic-size", "auto");
|
||||
test_valid_value("contain-intrinsic-size", "none");
|
||||
test_valid_value("contain-intrinsic-size", "1px");
|
||||
test_valid_value("contain-intrinsic-size", "2em 3px");
|
||||
test_valid_value("contain-intrinsic-size", "5px 5px", "5px");
|
||||
test_valid_value("contain-intrinsic-size", "auto auto", "auto");
|
||||
test_valid_value("contain-intrinsic-size", "1px auto");
|
||||
test_valid_value("contain-intrinsic-size", "auto 1px");
|
||||
test_valid_value("contain-intrinsic-size", "none none", "none");
|
||||
test_valid_value("contain-intrinsic-size", "1px none");
|
||||
test_valid_value("contain-intrinsic-size", "none 1px");
|
||||
test_valid_value("contain-intrinsic-size", "auto 1px 1px");
|
||||
test_valid_value("contain-intrinsic-size", "1px auto 1px");
|
||||
test_valid_value("contain-intrinsic-size", "auto 1px auto 1px", "auto 1px");
|
||||
|
||||
test_valid_value("contain-intrinsic-width", "auto");
|
||||
test_valid_value("contain-intrinsic-width", "none");
|
||||
test_valid_value("contain-intrinsic-width", "1px");
|
||||
test_valid_value("contain-intrinsic-width", "2em");
|
||||
test_valid_value("contain-intrinsic-width", "auto 1px");
|
||||
|
||||
test_valid_value("contain-intrinsic-height", "auto");
|
||||
test_valid_value("contain-intrinsic-height", "none");
|
||||
test_valid_value("contain-intrinsic-height", "1px");
|
||||
test_valid_value("contain-intrinsic-height", "2em");
|
||||
test_valid_value("contain-intrinsic-height", "auto 1px");
|
||||
|
||||
test_valid_value("contain-intrinsic-inline-size", "auto");
|
||||
test_valid_value("contain-intrinsic-inline-size", "none");
|
||||
test_valid_value("contain-intrinsic-inline-size", "1px");
|
||||
test_valid_value("contain-intrinsic-inline-size", "2em");
|
||||
test_valid_value("contain-intrinsic-inline-size", "auto 1px");
|
||||
|
||||
test_valid_value("contain-intrinsic-block-size", "auto");
|
||||
test_valid_value("contain-intrinsic-block-size", "none");
|
||||
test_valid_value("contain-intrinsic-block-size", "1px");
|
||||
test_valid_value("contain-intrinsic-block-size", "2em");
|
||||
test_valid_value("contain-intrinsic-block-size", "auto 1px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
margin: auto;
|
||||
bottom: 10px;
|
||||
position: absolute;
|
||||
block-size: -moz-fit-content;
|
||||
block-size: fit-content;
|
||||
inline-size: 100px;
|
||||
border: 5px solid red;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
margin: auto;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
block-size: -moz-fit-content;
|
||||
block-size: fit-content;
|
||||
inline-size: 100px;
|
||||
border: 5px solid red;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
background-color: black;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
block-size: -moz-fit-content;
|
||||
block-size: fit-content;
|
||||
inline-size: 100px;
|
||||
border: 5px solid red;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
inset: 0;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
block-size: -moz-fit-content;
|
||||
block-size: fit-content;
|
||||
inline-size: 100px;
|
||||
border: 5px solid red;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
margin: auto;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
block-size: -moz-fit-content;
|
||||
block-size: fit-content;
|
||||
inline-size: 100px;
|
||||
border: 5px solid red;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
margin: auto;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
block-size: -moz-fit-content;
|
||||
block-size: fit-content;
|
||||
inline-size: 100px;
|
||||
border: 5px solid red;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
writing-mode: vertical-rl;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
block-size: -moz-fit-content;
|
||||
block-size: fit-content;
|
||||
inline-size: 100px;
|
||||
border: 5px solid red;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
inset: 0;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
block-size: -moz-fit-content;
|
||||
block-size: fit-content;
|
||||
inline-size: 100px;
|
||||
writing-mode: vertical-rl;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Dynamic change to the inline-size of a block container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1731653">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1307853">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="This test verifies that the dynamic change to the block container's inline-size triggers the reflow of its children">
|
||||
|
||||
<style>
|
||||
#block {
|
||||
inline-size: 100px;
|
||||
block-size: 100px;
|
||||
font: 50px/1 Ahem;
|
||||
color: green;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#block > div {
|
||||
/* The following inline-size and padding will give the div a border-box
|
||||
inline-size of 100px, both before and after this test's dynamic
|
||||
modification. */
|
||||
box-sizing: border-box;
|
||||
inline-size: 100px;
|
||||
padding-right: calc(100px - 50%);
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="block">
|
||||
<div>XXXX</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* Make sure the layout is up-to-date, which is essential to trigger the bug. */
|
||||
document.documentElement.offsetHeight;
|
||||
|
||||
/* Change the block's inline-size to trigger incremental reflow. */
|
||||
document.getElementById("block").style.inlineSize = "200px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Dynamic change to the inline-size of a block container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1731653">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="This test verifies that the dynamic change to the block container's inline-size triggers the reflow of its children">
|
||||
|
||||
<style>
|
||||
#block {
|
||||
inline-size: 100px;
|
||||
block-size: 100px;
|
||||
font: 50px/1 Ahem;
|
||||
color: green;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#block > div {
|
||||
/* The following inline-size and padding will give the div a border-box
|
||||
inline-size of 100px, both before and after this test's dynamic
|
||||
modification. */
|
||||
inline-size: 50%;
|
||||
padding-right: calc(100px - 50%);
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="block">
|
||||
<div>XXXX</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* Make sure the layout is up-to-date, which is essential to trigger the bug. */
|
||||
document.documentElement.offsetHeight;
|
||||
|
||||
/* Change the block's inline-size to trigger incremental reflow. */
|
||||
document.getElementById("block").style.inlineSize = "200px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Dynamic change to the inline-size of body</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
inline-size: 200px;
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
background: green;
|
||||
inline-size: 100px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
.layout {
|
||||
font: 50px/1 Ahem;
|
||||
color: red;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
padding-top: 25%; /* This resolves against body's inline-size. */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="abs"></div>
|
||||
<div class="layout">XX</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Dynamic change to the inline-size of body</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1731653">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1729122">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="match" href="dynamic-change-inline-size-003-ref.html">
|
||||
<meta name="assert" content="This test verifies that the dynamic change to body's inline-size triggers the reflow of its children.">
|
||||
|
||||
<style>
|
||||
.abs {
|
||||
position: absolute;
|
||||
background: green;
|
||||
inline-size: 100px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
.layout {
|
||||
font: 50px/1 Ahem;
|
||||
color: red;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
padding-top: 25%; /* This resolves against body's inline-size. */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<!-- Test passes if there is a filled green square and no red. -->
|
||||
<div class="abs"></div>
|
||||
<div class="layout">XX</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
/* Make sure the layout is up-to-date, which is essential to trigger the bug. */
|
||||
document.documentElement.offsetHeight;
|
||||
|
||||
/* Change body's inline-size to trigger incremental reflow. */
|
||||
document.body.style.inlineSize = "200px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<title>Calc gets resolved with 0 percent basis for intrinsic size computation</title>
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
width: max-content;
|
||||
}
|
||||
span {
|
||||
margin-left: 30px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<span>ABCD</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<title>Calc gets resolved with 0 percent basis for intrinsic size computation</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="match" href="inline-intrinsic-size-calc-ref.html">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1733952">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#cyclic-percentage-contribution">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
width: max-content;
|
||||
}
|
||||
span {
|
||||
margin-left: calc(0% + 30px);
|
||||
padding-left: calc(0% + 50px);
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<span>ABCD</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test: check precedence between min-width and max-width</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
|
||||
<meta name="assert" content="Test that the used value of 'width' is resolved properly." />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
.tooltip {
|
||||
height: 68px;
|
||||
position: relative;
|
||||
max-width: 200px;
|
||||
min-width: 260px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#outer {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
height: 136px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="outer">
|
||||
<div id="inner" class="tooltip" role="tooltip"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(document.querySelector("#outer")).width, '260px');
|
||||
}, "When used value is resolved, min-width should win over max-width");
|
||||
</script>
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes" title="first paragraph">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#orthogonal-auto">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The intrinsic size of an orthogonal child is its shrink to fit size after layout" />
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ test_invalid_value("min-height", "min-content max-content");
|
|||
test_invalid_value("min-height", "available");
|
||||
test_invalid_value("min-height", "10px border-box");
|
||||
test_invalid_value("min-height", "content-box 20%");
|
||||
test_invalid_value("min-height", "fit-content");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ test_invalid_value("min-width", "min-content max-content");
|
|||
test_invalid_value("min-width", "available");
|
||||
test_invalid_value("min-width", "10px border-box");
|
||||
test_invalid_value("min-width", "content-box 20%");
|
||||
test_invalid_value("min-width", "fit-content");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -22,24 +22,29 @@
|
|||
display:block;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
setup({explicit_done: true});
|
||||
function doTest() {
|
||||
test(() => {
|
||||
let target = document.querySelector("#target");
|
||||
assert_equals(target.offsetWidth, target.offsetHeight);
|
||||
assert_equals(target.offsetWidth, target.parentNode.offsetWidth);
|
||||
assert_equals(target.offsetHeight, target.parentNode.offsetHeight);
|
||||
}, '#target offsetSize matches #container offsetSize' );
|
||||
test(() => {
|
||||
document.querySelector("#container").style.height = "100px";
|
||||
let target = document.querySelector("#target");
|
||||
assert_equals(target.offsetWidth, target.offsetHeight);
|
||||
assert_equals(target.offsetWidth, target.parentNode.offsetWidth);
|
||||
assert_equals(target.offsetHeight, target.parentNode.offsetHeight);
|
||||
}, '#target offsetSize matches #container offsetSize after resize' );
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="doTest()">
|
||||
<div id="outer">
|
||||
<div id="container">
|
||||
<img id="target" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
let target = document.querySelector("#target");
|
||||
assert_equals(target.offsetWidth, target.offsetHeight);
|
||||
assert_equals(target.offsetWidth, target.parentNode.offsetWidth);
|
||||
assert_equals(target.offsetHeight, target.parentNode.offsetHeight);
|
||||
}, '#target offsetSize matches #container offsetSize' );
|
||||
test(() => {
|
||||
document.querySelector("#container").style.height = "100px";
|
||||
let target = document.querySelector("#target");
|
||||
assert_equals(target.offsetWidth, target.offsetHeight);
|
||||
assert_equals(target.offsetWidth, target.parentNode.offsetWidth);
|
||||
assert_equals(target.offsetHeight, target.parentNode.offsetHeight);
|
||||
}, '#target offsetSize matches #container offsetSize after resize' );
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ input.i {
|
|||
input.mi {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
background: lime;
|
||||
}
|
||||
|
|
@ -120,7 +119,7 @@ div {
|
|||
<input type="range" class="mi n">
|
||||
</div></div>
|
||||
|
||||
<div style="width:30px"><div style="width:-moz-max-content;width:max-content">
|
||||
<div style="width:30px"><div style="width:max-content">
|
||||
<input type="range" class="mi n" style="width:50%">
|
||||
</div></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,14 +19,12 @@ input { margin: 2px; }
|
|||
|
||||
input.i {
|
||||
width: 50%;
|
||||
min-width: -moz-min-content;
|
||||
min-width: min-content;
|
||||
background: lime;
|
||||
}
|
||||
|
||||
input.mi {
|
||||
max-width: 50%;
|
||||
min-width: -moz-min-content;
|
||||
min-width: min-content;
|
||||
background: lime;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,19 +19,17 @@ input { margin: 2px; }
|
|||
|
||||
input.b {
|
||||
height: 50%;
|
||||
min-height: -moz-min-content;
|
||||
min-height: min-content;
|
||||
background: lime;
|
||||
}
|
||||
|
||||
input.mb {
|
||||
max-height: 50%;
|
||||
min-height: -moz-min-content;
|
||||
min-height: min-content;
|
||||
background: lime;
|
||||
}
|
||||
|
||||
input.b.min-auto, input.mb.min-auto, {
|
||||
input.b.min-auto, input.mb.min-auto {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,19 +19,17 @@ input { margin: 2px; }
|
|||
|
||||
input.b {
|
||||
height: 50%;
|
||||
min-height: -moz-min-content;
|
||||
min-height: min-content;
|
||||
background: lime;
|
||||
}
|
||||
|
||||
input.mb {
|
||||
max-height: 50%;
|
||||
min-height: -moz-min-content;
|
||||
min-height: min-content;
|
||||
background: lime;
|
||||
}
|
||||
|
||||
input.b.min-auto, input.mb.min-auto, {
|
||||
input.b.min-auto, input.mb.min-auto {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,13 +12,9 @@ div {
|
|||
white-space: pre;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
.min > div {
|
||||
width: -moz-min-content;
|
||||
width: -webkit-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,13 +15,9 @@ div {
|
|||
border: 5px solid blue;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
.min > div {
|
||||
width: -moz-min-content;
|
||||
width: -webkit-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ div {
|
|||
white-space: pre;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,13 +16,9 @@ div {
|
|||
white-space: nowrap;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
.min > div {
|
||||
width: -moz-min-content;
|
||||
width: -webkit-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ div {
|
|||
white-space: pre;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,13 +16,9 @@ div {
|
|||
white-space: nowrap;
|
||||
}
|
||||
.max > div {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
.min > div {
|
||||
width: -moz-min-content;
|
||||
width: -webkit-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test if percentage height of table's child element with box-sizing: border-box is calculated correctly</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#box-sizing">
|
||||
<style>
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: red;
|
||||
}
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: green;
|
||||
padding-top: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper">
|
||||
wrapped content (height: 100%)
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test if percentage height of table's child element with box-sizing: border-box is calculated correctly</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#box-sizing">
|
||||
<link rel="match" href="table-child-percentage-height-with-border-box-expected.html">
|
||||
<style>
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
display: table-row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: red;
|
||||
}
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: green;
|
||||
padding-top: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper">
|
||||
wrapped content (height: 100%)
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue