Test for csswg issue 4741

w3c/csswg-drafts#4741
frivoal · Apr 8, 2020 · e339012 · e339012
1 parent 30a0826
commit e339012
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/css/css-contain/contain-size-063.html b/css/css-contain/contain-size-063.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Containment Test: 'contain: size' affects intrinsic size</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
+<link rel="match" href="reference/contain-size-063-ref.html">
+<meta name="flags" content="">
+<meta name="asserts" content="the intrinsic size of a size-contained element is treated as 0 in various scenarios involving intrinsic sizing.">
+
+<style>
+.red {
+    background: red;
+}
+.abs {
+    position: absolute;
+}
+.float {
+    float: left;
+}
+.zero {
+    width: 0;
+}
+.contained {
+    contain: size;
+    color: transparent;
+}
+.grid {
+    display: grid;
+    grid: max-content auto / min-content auto;
+}
+table {
+    border-collapse: collapse;
+}
+td {
+    padding: 0;
+}
+</style>
+
+<p>Test passes if there is no red below.
+
+<!-- max content sized-->
+<div class="red abs"><div class="contained">Arbitrary content content<br>that takes up size.<br>Block Layout</div></div>
+
+<!-- max content sized-->
+<div class="red float"><div class="contained">Arbitrary content content<br>that takes up size.<br>Float</div></div>
+
+<!-- min content sized-->
+<div class=zero><div class="red float"><div class="contained">Arbitrary content content<br>that takes up size.<br>Float in narrow wrapper</div></div></div>
+
+<div class="grid red">
+    <div class="red"></div>
+    <div class="contained">Arbitrary content content<br>that takes up size.<br>Grid item giving the first row it's height</div>
+    <div class="contained">Arbitrary content content<br>that takes up size.<br>Grid item giving the first column its width</div>
+</div>
+
+<table class=red>
+    <tr>
+        <td class=red>
+        <td><div class="contained">Arbitrary content content<br>that takes up size.<br>content of a table cell giving the fist row it's height</div>
+    <tr>
+        <td><div class="contained">Arbitrary content content<br>that takes up size.<br>content of a table cell giving the first column it's width</div>
+</div>
diff --git a/css/css-contain/reference/contain-size-063-ref.html b/css/css-contain/reference/contain-size-063-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>Test passes if there is no red below.