mirror of
https://github.com/servo/servo.git
synced 2025-09-01 10:38:25 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: calling requestFullscreen() on video element inside a named flow</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/fullscreen/#api" />
|
||||
<meta name="flags" content="dom interact">
|
||||
<meta name="assert" content="This test checks that calling the requestFullscreen() method
|
||||
on a video element that's part of a named flow properly displays the video in
|
||||
full screen">
|
||||
<link rel="stylesheet" href="support/common.css" media="all">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
flow-into: flow;
|
||||
}
|
||||
#region {
|
||||
flow-from: flow;
|
||||
}
|
||||
#region > p {
|
||||
background: red;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="instructions">
|
||||
<ol>
|
||||
<li>You should see no red rectangles or squares before or during the text</li>
|
||||
<li>You should see a video playing below</li>
|
||||
<li>Click the <em>Go full screen</em> button below
|
||||
<ul>
|
||||
<li>The page should enter full screen mode, with only the video showing; the
|
||||
video should still play.</li>
|
||||
<li>The browser might display a permission window asking you to allow full
|
||||
screen on this page. Allow it.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Exit full screen (e.g. by pressing <em>Esc</em>)
|
||||
<ul>
|
||||
<li>Video should still play</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
<div id="content">
|
||||
<video controls autoplay width="432" height="240" muted loop>
|
||||
<source type="video/webm" src="support/green-at-15.ogv"></source>
|
||||
<source type="video/mp4" src="support/green-at-15.mp4"></source>
|
||||
</video>
|
||||
</div>
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "video");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: calling requestFullscreen() on image element inside a named flow</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/fullscreen/#api" />
|
||||
<meta name="flags" content="dom interact">
|
||||
<meta name="assert" content="This test checks that calling the requestFullscreen() method
|
||||
on an image element that's part of a named flow properly displays the image in
|
||||
full screen">
|
||||
<link rel="stylesheet" href="support/common.css" media="all">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
flow-into: flow;
|
||||
}
|
||||
#region {
|
||||
flow-from: flow;
|
||||
}
|
||||
#region > p {
|
||||
background: red;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="instructions">
|
||||
<ol>
|
||||
<li>You should see no red rectangles or squares before or during the text</li>
|
||||
<li>You should see a picture of a cat below</li>
|
||||
<li>Click the <em>Go full screen</em> button below
|
||||
<ul>
|
||||
<li>The page should enter full screen mode, with only the picture being showed.</li>
|
||||
<li>The browser might display a permission window asking you to allow full
|
||||
screen on this page. Allow it.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Exit full screen (e.g. by pressing <em>Esc</em>)
|
||||
<ul>
|
||||
<li>The picture of the cat should be visible, along with all the other initial content.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
<div id="content">
|
||||
<img src="support/cat.jpg" alt="A picture of a cat" width="320" height="240">
|
||||
</div>
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "img");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: calling requestFullscreen() on inline element inside a named flow</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/fullscreen/#api" />
|
||||
<meta name="flags" content="dom ahem interact">
|
||||
<meta name="assert" content="This test checks that calling the requestFullscreen() method
|
||||
on an inline element that's part of a named flow properly displays it in full screen">
|
||||
<link rel="stylesheet" href="support/common.css" media="all">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
flow-into: flow;
|
||||
}
|
||||
#content span {
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
#region {
|
||||
flow-from: flow;
|
||||
}
|
||||
#region > p {
|
||||
background: red;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="instructions">
|
||||
<ol>
|
||||
<li>You should see no red rectangles or squares before or during the text</li>
|
||||
<li>You should see a green square below</li>
|
||||
<li>Click the <em>Go full screen</em> button below
|
||||
<ul>
|
||||
<li>The page should enter full screen mode, with only the green block being visible.</li>
|
||||
<li>The browser might display a permission window asking you to allow full
|
||||
screen on this page. Allow it.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Exit full screen (e.g. by pressing <em>Esc</em>)
|
||||
<ul>
|
||||
<li>The green block should be visible, along with all the other initial content.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
<div id="content">
|
||||
<span>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</span>
|
||||
</div>
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#content span");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: calling requestFullscreen() on block element inside a named flow</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/fullscreen/#api" />
|
||||
<meta name="flags" content="ahem dom interact">
|
||||
<meta name="assert" content="This test checks that calling the requestFullscreen() method
|
||||
on a block element that's part of a named flow properly displays it in full screen">
|
||||
<link rel="stylesheet" href="support/common.css" media="all">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
flow-into: flow;
|
||||
}
|
||||
#content p {
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
#region {
|
||||
flow-from: flow;
|
||||
}
|
||||
#region > p {
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="instructions">
|
||||
<ol>
|
||||
<li>You should see no red rectangles or squares before or during the text</li>
|
||||
<li>You should see a green square below</li>
|
||||
<li>Click the <em>Go full screen</em> button below
|
||||
<ul>
|
||||
<li>The page should enter full screen mode, with only the green block being visible.</li>
|
||||
<li>The browser might display a permission window asking you to allow full
|
||||
screen on this page. Allow it.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Exit full screen (e.g. by pressing <em>Esc</em>)
|
||||
<ul>
|
||||
<li>The green block should be visible, along with all the other initial content.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
<div id="content">
|
||||
<p>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</p>
|
||||
</div>
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#content p");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: calling requestFullscreen() on a fragmented block element inside a named flow</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/fullscreen/#api" />
|
||||
<meta name="flags" content="ahem dom interact">
|
||||
<meta name="assert" content="This test checks that calling the requestFullscreen() method
|
||||
on a block element that's part of a named flow and is fragmented displays both
|
||||
fragments it in full screen">
|
||||
<link rel="stylesheet" href="support/common.css" media="all">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
flow-into: flow;
|
||||
}
|
||||
#content p {
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
.region {
|
||||
flow-from: flow;
|
||||
max-height: 60px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
}
|
||||
.region > p {
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="instructions">
|
||||
<ol>
|
||||
<li>You should see no red rectangles or squares before or during the text</li>
|
||||
<li>Below, you should see two horizontal green rectangles, side by side</li>
|
||||
<li>Click the <em>Go full screen</em> button below
|
||||
<ul>
|
||||
<li>The page should enter full screen mode, with only a green square being visible.</li>
|
||||
<li>The browser might display a permission window asking you to allow full
|
||||
screen on this page. Allow it.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Exit full screen (e.g. by pressing <em>Esc</em>)
|
||||
<ul>
|
||||
<li>The two green rectangles should be visible, along with all the other initial content.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
<div id="content">
|
||||
<p>
|
||||
xxxxxx<br>
|
||||
xxxxxx<br>
|
||||
xxxxxx<br>
|
||||
xxxxxx<br>
|
||||
xxxxxx<br>
|
||||
xxxxxx
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#content p");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: calling requestFullscreen() on an element whose descendants
|
||||
are in a named flow</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/fullscreen/#api" />
|
||||
<meta name="flags" content="dom ahem interact">
|
||||
<meta name="assert" content="This test checks that calling the requestFullscreen() method
|
||||
on an element whose descendants are part of a named flow will not show the
|
||||
descendants flowed in the region.">
|
||||
<link rel="stylesheet" href="support/common.css" media="all">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
#content-parent {
|
||||
border: 10px solid blue;
|
||||
width: 80px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
#content {
|
||||
flow-into: flow;
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
#region {
|
||||
flow-from: flow;
|
||||
}
|
||||
#region > p {
|
||||
background: red;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="instructions">
|
||||
<ol>
|
||||
<li>You should see no red rectangles or squares before or during the text</li>
|
||||
<li>Below, you should see a horizontal blue rectangle and green square below it</li>
|
||||
<li>Click the <em>Go full screen</em> button below
|
||||
<ul>
|
||||
<li>The page should enter full screen mode, with only the blue rectangle being visible.</li>
|
||||
<li>The browser might display a permission window asking you to allow full
|
||||
screen on this page. Allow it.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Exit full screen (e.g. by pressing <em>Esc</em>)
|
||||
<ul>
|
||||
<li>The blue rectangle should be visible, along with all the other initial content.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
<div id="content-parent">
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#content-parent");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: calling requestFullscreen() on a fixed-size 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/fullscreen/#api" />
|
||||
<meta name="flags" content="ahem dom interact">
|
||||
<meta name="assert" content="This test checks that calling the requestFullscreen() method
|
||||
on a fixed-size region displays the region and the content flowed in it without
|
||||
resizing the region or reflowing the content.">
|
||||
<link rel="stylesheet" href="support/common.css" media="all">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
flow-into: flow;
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
#region {
|
||||
flow-from: flow;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#region > p {
|
||||
background: red;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="instructions">
|
||||
<ol>
|
||||
<li>You should see no red rectangles or squares before or during the text</li>
|
||||
<li>You should see a green square below</li>
|
||||
<li>Click the <em>Go full screen</em> button below
|
||||
<ul>
|
||||
<li>The page should enter full screen mode, with only the green block being visible.</li>
|
||||
<li>The browser might display a permission window asking you to allow full
|
||||
screen on this page. Allow it.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Exit full screen (e.g. by pressing <em>Esc</em>)
|
||||
<ul>
|
||||
<li>The green block should be visible, along with all the other initial content.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
<div id="content">
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
</div>
|
||||
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#region");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: calling requestFullscreen() on an 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/fullscreen/#api" />
|
||||
<meta name="flags" content="ahem dom interact">
|
||||
<meta name="assert" content="This test checks that calling the requestFullscreen() method
|
||||
on an auto-sized region displays the region and the content flowed in it without
|
||||
resizing the window or reflowing the content.">
|
||||
<link rel="stylesheet" href="support/common.css" media="all">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
flow-into: flow;
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
#region {
|
||||
flow-from: flow;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
#region > p {
|
||||
background: red;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="instructions">
|
||||
<ol>
|
||||
<li>You should see no red rectangles or squares before or during the text</li>
|
||||
<li>You should see a green horizontal line below</li>
|
||||
<li>Click the <em>Go full screen</em> button below
|
||||
<ul>
|
||||
<li>The page should enter full screen mode, with only the green line being visible.</li>
|
||||
<li>The browser might display a permission window asking you to allow full
|
||||
screen on this page. Allow it.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Exit full screen (e.g. by pressing <em>Esc</em>)
|
||||
<ul>
|
||||
<li>The green block should be visible, along with all the other initial content.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
<div id="content">
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
</div>
|
||||
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#region");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: using the :full-screen pseudo class to make a full-screen region auto-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" />
|
||||
<link rel="help" href="http://www.w3.org/TR/fullscreen/#api" />
|
||||
<link rel="help" href="http://www.w3.org/TR/fullscreen/#:fullscreen-pseudo-class" />
|
||||
<meta name="flags" content="ahem dom interact">
|
||||
<meta name="assert" content="This test checks that using the :full-screen pseudo class to
|
||||
make a region auto-sized works after calling the requestFullscreen() method
|
||||
on a fixed size region.">
|
||||
<link rel="stylesheet" href="support/common.css" media="all">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
flow-into: flow;
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
#region {
|
||||
flow-from: flow;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#region > p {
|
||||
background: red;
|
||||
|
||||
}
|
||||
#region:full-screen {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="instructions">
|
||||
<ol>
|
||||
<li>You should see no red rectangles or squares before or during the text</li>
|
||||
<li>You should see a green square below</li>
|
||||
<li>Click the <em>Go full screen</em> button below
|
||||
<ul>
|
||||
<li>The page should enter full screen mode, with the green square turning
|
||||
into a thick green horizontal line.</li>
|
||||
<li>The browser might display a permission window asking you to allow full
|
||||
screen on this page. Allow it.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Exit full screen (e.g. by pressing <em>Esc</em>)
|
||||
<ul>
|
||||
<li>The green line should turn back into a green square and all the other
|
||||
initial content should become visible again.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
<div id="content">
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
</div>
|
||||
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#region");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: calling requestFullscreen() on a region that's part of a multiple regions
|
||||
region chain</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/fullscreen/#api" />
|
||||
<meta name="flags" content="ahem interact">
|
||||
<meta name="assert" content="This test checks that calling the requestFullscreen() method
|
||||
on a region that is part of a multiple-regions region chain does not change the order
|
||||
in which content is flowed through the region chain.">
|
||||
<link rel="stylesheet" href="support/common.css" media="all">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
flow-into: flow;
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
#content .blue {
|
||||
color: lightblue;
|
||||
}
|
||||
.region {
|
||||
flow-from: flow;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.region > p {
|
||||
background: red;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="instructions">
|
||||
<ol>
|
||||
<li>You should see no red rectangles or squares before or during the text</li>
|
||||
<li>Below, you should see a green square, a light blue square and another green square, stacked vertically</li>
|
||||
<li>Click the <em>Go full screen</em> button below
|
||||
<ul>
|
||||
<li>The page should enter full screen mode, with only the light blue square being visible.</li>
|
||||
<li>The browser might display a permission window asking you to allow full
|
||||
screen on this page. Allow it.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Exit full screen (e.g. by pressing <em>Esc</em>)
|
||||
<ul>
|
||||
<li>All initial content should be visible again.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
<div id="content">
|
||||
<div>
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
</div>
|
||||
<div class="blue">
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
</div>
|
||||
<div>
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class="second region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", ".second.region");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
button {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#fail-marker {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: red;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#fail-marker::before {
|
||||
content: "FAIL";
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,18 @@
|
|||
function makeFullScreen(selector) {
|
||||
var element = document.querySelector(selector);
|
||||
if (selector) {
|
||||
selector.requestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
function makeFullScreenToggle(selector, targetSelector) {
|
||||
var button = document.querySelector(selector);
|
||||
button.addEventListener("click", function() {
|
||||
var element = document.querySelector(targetSelector);
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else {
|
||||
document.querySelector("#fail-marker").style.visibility = "visible";
|
||||
}
|
||||
})
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue