mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="../support/80px-block-ref.html" frameborder="0" width="160" height="400"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="../support/80px-block-float-ref.html" frameborder="0" width="160" height="400"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see two green squares below and no red.</p>
|
||||
<p>The test also fails if any of the green blocks is <strong>not</strong> a square (e.g. rectangle or polygon).</p>
|
||||
<iframe src="../support/2-80px-block-ref.html" frameborder="0" width="160" height="400"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing region that has percentage size</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing a region
|
||||
that is sized to a percentage of the body correctly relayouts the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-001-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
#region {
|
||||
width: 50%;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 160, 400);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-body.html" frameborder="0" width="800" height="400"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing region that has position:fixed and top/right/bottom/left set</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing a region
|
||||
that has position fixed and is sized using top/right/bottom/left correctly relayouts
|
||||
the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-001-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
#region {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 80, 100);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-body.html" frameborder="0" width="320" height="400"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing region that is sized using viewport units</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing a region
|
||||
sized using viewport units correctly relayouts the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-001-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
#region {
|
||||
width: 80vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 100, 100);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-body.html" frameborder="0" width="400" height="400"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing auto-sized region</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing an
|
||||
auto-sized region correctly relayouts the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-001-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
#region {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 80, 200);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-body.html" frameborder="0" width="400" height="400"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing floated region with percentage size relative to the body</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-details">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing a region
|
||||
that has a percentage size relative to the body and is floated, correctly relayouts
|
||||
the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-005-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
#region {
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 160, 100);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-body.html" frameborder="0" width="320" height="400"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing region with percentage size inside a container that also has percentage size</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing a region
|
||||
that has a percentage size relative to a percentage-sized parent correctly relayouts
|
||||
the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-001-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
#region-parent {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
#region {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 320, 320);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-container.html" frameborder="0" width="500" height="400"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing region with percentage size inside a container that has size set in viewport units</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing a region
|
||||
that has a percentage size relative to a parent sized using viewport units correctly
|
||||
relayouts the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-001-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
#region-parent {
|
||||
width: 50vw;
|
||||
height: 80vh;
|
||||
}
|
||||
#region {
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 200, 200);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-container.html" frameborder="0" width="437" height="143"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing region with percentage size when content flowed in it also has percentage size</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing a region
|
||||
that has a percentage size when the content flowed in it also has a percentage size
|
||||
set correctly relayouts the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-001-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
#content {
|
||||
width: 50%;
|
||||
}
|
||||
#region {
|
||||
width: 80%;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 200, 200);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-body.html" frameborder="0" width="437" height="143"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing autosized region when content flowed in it is sized with viewport units</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-details">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="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.">
|
||||
<link rel="match" href="reference/regions-resizing-001-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
#content {
|
||||
width: 40vw;
|
||||
height: 40vh;
|
||||
}
|
||||
#region {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 200, 200);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-body.html" frameborder="0" width="437" height="143"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing percent sized region when content flowed in it is floated</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing an
|
||||
percentage sized region when the content flowed in it is floated, correctly
|
||||
relayouts the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-001-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
#content {
|
||||
/* Will not be visibly offset to the right since the text align is still left-aligned
|
||||
and the content is as wide as the region. */
|
||||
float: right;
|
||||
}
|
||||
#region {
|
||||
width: 50%;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 240, 200);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-body.html" frameborder="0" width="437" height="143"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing fixed sized region and percent-sized region</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing two
|
||||
regions and a single named flow where one region has a fixed size size and the other
|
||||
has a percentage size correctly relayouts the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-011-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
#region1, #region2 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#region1 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
#region2 {
|
||||
width: 40%;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 200, 200);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see two green squares below and no red.</p>
|
||||
<p>The test also fails if any of the green blocks is <strong>not</strong> a square (e.g. rectangle or polygon).</p>
|
||||
<iframe src="support/two-regions-in-container.html" frameborder="0" width="437" height="143"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing percent sized region and auto-sized region</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-details">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that resizing the viewport of a page containing two
|
||||
regions and a single named flow where one region has percentage size and the other
|
||||
is auto-sized correctly relayouts the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-011-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
#region-parent {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#region1 {
|
||||
width: 80%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
#region2 {
|
||||
margin-top: 10px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 100, 200);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see two green squares below and no red.</p>
|
||||
<p>The test also fails if any of the green blocks is <strong>not</strong> a square (e.g. rectangle or polygon).</p>
|
||||
<iframe src="support/two-regions-in-container.html" frameborder="0" width="437" height="143"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: resizing region based on media query</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom ahem http">
|
||||
<meta name="assert" content="Test checks that changing the size of a region via media queries
|
||||
correctly relayouts the region's contents.">
|
||||
<link rel="match" href="reference/regions-resizing-001-ref.html">
|
||||
<!-- The <script type="text/css"> below is just a textual container for styles that will be
|
||||
injected in the iframe at load time.-->
|
||||
<script id="test-styles" type="text/css">
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
#region {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
@media (max-width: 300px) {
|
||||
#region {
|
||||
position: static;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="support/util.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("load", function() {
|
||||
injectStylesInIFrame("#test-styles", "iframe");
|
||||
resizeViewportTo("iframe", 299, 299);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square below and no red.</p>
|
||||
<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>
|
||||
<iframe src="support/region-in-body.html" frameborder="0" width="437" height="143"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>One region in body</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.content {
|
||||
margin: 10px;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx
|
||||
</div>
|
||||
<div class="content">
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>One region in body</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>One region in body</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx<br>
|
||||
xxxx
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>One region in body</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#container {
|
||||
background: red;
|
||||
}
|
||||
#content {
|
||||
flow-into: flow;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
#region {
|
||||
flow-from: flow;
|
||||
}
|
||||
</style>
|
||||
<script src="util.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<!-- The ​ entity is a zerowidth space. It enables me to create nicely reflowing rectangles of Ahem text -->
|
||||
<div id="content">
|
||||
xxxx​xxxx​xxxx​xxxx
|
||||
</div>
|
||||
</div>
|
||||
<div id="region">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>One region in body</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#container {
|
||||
background: red;
|
||||
}
|
||||
#content {
|
||||
flow-into: flow;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
#region {
|
||||
flow-from: flow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<!-- The ​ entity is a zerowidth space. It enables me to create nicely reflowing rectangles of Ahem text -->
|
||||
<div id="content">
|
||||
xxxx​xxxx​xxxx​xxxx
|
||||
</div>
|
||||
</div>
|
||||
<div id="region-parent">
|
||||
<div id="region">
|
||||
</div>
|
||||
</div>
|
||||
<script src="util.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>One region in body</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#container {
|
||||
background: red;
|
||||
}
|
||||
#content {
|
||||
flow-into: flow;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
#region1, #region2 {
|
||||
flow-from: flow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<!-- The ​ entity is a zerowidth space. It enables me to create nicely reflowing rectangles of Ahem text -->
|
||||
<div id="content">
|
||||
xxxx​xxxx​xxxx​xxxx​xxxx​xxxx​xxxx​xxxx
|
||||
</div>
|
||||
</div>
|
||||
<div id="region-parent">
|
||||
<div id="region1"></div>
|
||||
<div id="region2"></div>
|
||||
</div>
|
||||
<script src="util.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
function resizeViewportTo(viewportSelector, width, height) {
|
||||
var iframe = document.querySelector(viewportSelector);
|
||||
// Commonly used trick to trigger a layout
|
||||
iframe.contentWindow.document.body.offsetTop;
|
||||
|
||||
iframe.width = width;
|
||||
iframe.height = height;
|
||||
|
||||
iframe.contentWindow.document.body.offsetTop;
|
||||
}
|
||||
|
||||
function injectStylesInIFrame(styleSelector, frameSelector) {
|
||||
var style = document.querySelector(styleSelector),
|
||||
frame = document.querySelector(frameSelector);
|
||||
|
||||
frame.contentWindow.addNewStyles(style.textContent);
|
||||
}
|
||||
|
||||
|
||||
if (window.parent != window) {
|
||||
// we're in an iframe, so expose the bits that allow setting styles inside
|
||||
window.addNewStyles = function (cssText) {
|
||||
var styleTag = document.createElement("style"),
|
||||
textNode = document.createTextNode(cssText);
|
||||
|
||||
styleTag.appendChild(textNode);
|
||||
document.head.appendChild(styleTag);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue