regions-resizing-009

CSS Regions: resizing autosized region when content flowed in it is sized with viewport units

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem, dom, http
Assertion
Test checks that resizing the viewport of a page containing an autosized region when the content flowed in it is sized with viewport units correctly relayouts the region's contents.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3 		<title>CSS Regions: resizing autosized region when content flowed in it is sized with viewport units</title>
 4 		<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
 5 		<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
 6 		<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
 7 		<link href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-details" rel="help">
 8 		<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
 9 		<meta content="dom ahem http" name="flags">
10 		<meta content="Test checks that resizing the viewport of a page containing an
11 				autosized region when the content flowed in it is sized with viewport units correctly
12 				relayouts the region's contents." name="assert">
13 		<link href="reference/regions-resizing-001-ref.htm" rel="match">
14 		<!-- The <script type="text/css"> below is just a textual container for styles that will be
15 		injected in the iframe at load time.-->
16 		<script type="text/css" id="test-styles">
17 		#content {
18 			width: 40vw;
19 			height: 40vh;
20 		}
21 		#region {
22 			width: auto;
23 			height: auto;
24 		}
25 		</script>
26 		<script src="support/util.js" type="text/javascript"></script>
27 		<script type="text/javascript">
28 		window.addEventListener("load", function() {
29 			injectStylesInIFrame("#test-styles", "iframe");
30 			resizeViewportTo("iframe", 200, 200);
31 		})
32 		</script>
33 	</head>
34 	<body>
35 		<p>Test passes if you see a green square below and no red.</p>
36 		<p>The test also fails if the there's a green block that is <strong>not</strong> a square (e.g. rectangle or polygon).</p>
37 		<iframe width="437" height="143" frameborder="0" src="support/region-in-body.html"></iframe>
38 	
39 </body></html>