Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu 2026-09-30 23:13:03 +02:00
commit b38dea0597
25901 changed files with 9982925 additions and 369 deletions

View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Alert/prompt test</title>
<script defer src="../../js/UI/alert.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
<link rel="stylesheet" type="text/css" href="/shared/style/buttons.css">
</head>
<body>
<fieldset>
<legend>Call on mozbrowser frame</legend>
<section>
<button class="parent" id="button1">Alert</button>
<button class="parent" id="button2">Confirm</button>
<button class="parent" id="button3">Prompt</button>
</section>
</fieldset>
<br>
<fieldset>
<legend>Call on this iframe within mozbrowser</legend>
<section>
<button class="mozbrowser" id="button21">Alert</button>
<button class="mozbrowser" id="button22">Confirm</button>
<button class="mozbrowser" id="button23">Prompt</button>
</section>
</fieldset>
<br>
<fieldset>
<legend>Prompts with long messages</legend>
<section>
<button id="button31" class="long">Long Alert</button>
<button id="button32" class="long">Long Confirm</button>
<button id="button33" class="long">Long Prompt</button>
</section>
</fieldset>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Canvas Tag test</title>
<script type="text/javascript" src="../../js/UI/canvas.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
<link rel="stylesheet" type="text/css" href="/shared/style/buttons.css">
</head>
<body>
<canvas id="canvas" width="200" height="200" style="border: solid red 2px"></canvas>
<h2 id="hidden-status">hidden</h2>
<button id="button-toggle-hidden">Toggle</button>
<button id="button-draw">Draw</button>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>New fonts test</title>
<script defer src="../../js/UI/contextmenu.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
</head>
<body>
<h3>Long press on the gray block below, and you should see a popup menu.</h3>
<section id="contextMenu" contextmenu="mymenu">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et ipsum in nisl euismod venenatis eget sit amet lectus. Nam magna massa, mollis a fringilla eu, lobortis at metus. Maecenas et mi est. Donec arcu nunc, scelerisque id dapibus non, commodo et diam. Suspendisse et nisl vel dui tempus semper. Aenean placerat lectus et lectus iaculis posuere. Pellentesque scelerisque, nisi vel ornare adipiscing, massa tellus sodales nulla, quis porttitor purus lorem nec elit. Curabitur aliquam turpis non erat volutpat gravida. Pellentesque in neque odio, a placerat tellus. Proin a quam magna, at vestibulum sem. Integer a ipsum sapien, quis tempor est. Duis quis varius lectus.</p>
<!-- create the menu -->
<menu type="context" id="mymenu">
<menuitem label="Refresh Post" id="reload" icon="http://davidwalsh.name/dw-content/refresh-icon.png"></menuitem>
<menuitem label="Skip to Comments" id="comments" icon="http://davidwalsh.name/dw-content/comment_icon.gif"></menuitem>
<menu label="Share on..." icon="http://davidwalsh.name/dw-content/share_icon.gif">
<menuitem label="Twitter" icon="http://davidwalsh.name/dw-content/twitter_icon.gif" id="twitter"></menuitem>
<menuitem label="Facebook" icon="http://davidwalsh.name/dw-content/facebook_icon16x16.gif" id="facebook"></menuitem>
</menu>
</menu>
</section>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>CSS dimension test</title>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
</head>
<body>
<h2>The following charts should be the same in length</h2>
mozmm may not be supported by FFOS
<h3>iFrame</h3>
<iframe src="css_dimension_iframe.html"></iframe>
<h3>iFrame with mozbrowser & mozasyncpan</h3>
<iframe src="css_dimension_iframe.html" mozbrowser mozasyncpan></iframe>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>CSS dimension test - iframe</title>
<script defer src="../../js/UI/css_dimension.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
</head>
<body>
<div id="bar_inch" class="bar">1in</div>
<div id="bar_mm" class="bar">25.4mm</div>
<div id="bar_px" class="bar">96px</div>
<div id="bar_mozmm" class="bar">25.4mozmm</div>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Empty test</title>
<script defer src="../../js/UI/empty.js"></script>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>mozRequestFullScreen test</title>
<script defer src="../../js/UI/fullscreen.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
<link rel="stylesheet" type="text/css" href="/shared/style/buttons.css">
</head>
<body>
<p>Test mozRequestFullScreen() requests from web content.
System app should handle this properly and properly cancel the full screen
if there are some concurrent action that cannot work with it.</p>
<fieldset>
<legend>Test on <b><u>div element</u></b> of this iframe within mozbrowser</legend>
<section>
<div id="fullscreen-div">
<p>Am I full screen?</p>
<button id="testBtn-div">Test</button>
</div>
</section>
</fieldset>
<br>
<fieldset>
<legend>Test on <b><u>this iframe</u></b>, an element within the mozbrowser</legend>
<section>
<button id="testBtn">Test</button>
</section>
</fieldset>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>Fullscreen Controls</title>
</head>
<body>
<p>The video element should have controls for entering and exiting
fullscreen, but the audio element should not</p>
<video src="../../data/video/meetthecubs.webm" preload controls width=300>
</video>
<br>
<audio src="../../data/ringtones/classic.ogg" preload controls>
</audio>
</body>
</html>

View file

@ -0,0 +1,265 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Keyboard test</title>
<script defer src="../../js/UI/keyboard.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
<link rel="stylesheet" type="text/css" href="/shared/style/buttons.css">
</head>
<body>
<h3>This is a test for different keyboard mode, click on elements to show keyboard</h3>
<div id="readme">
<fieldset>
<legend><b><u>x-inputmode</u></b> explanation</legend>
<section class="table">
<div class="row">
<div class="column_left">
latin<br>
verbatim
</div>
<div class="column_right">
Keyboard in lowercase mode
</div>
</div>
<div class="row">
<div class="column_left">
none<br>
latin-prose<br>
latin-name
</div>
<div class="column_right">
Keyboard in uppercase mode
</div>
</div>
<div class="row">
<div class="column_left">
digit
</div>
<div class="column_right">
Keyboard with only [0-9]
</div>
</div>
<div class="row">
<div class="column_left">
numeric
</div>
<div class="column_right">
Keyboard with [0-9], +, -, comma, dot
</div>
</div>
</section>
</fieldset>
<p>
Eventually there will be other
differences as well (in word suggestions, for example) but for
now, inputmode is just controlling auto capitalization.
</p>
</div>
<button id="readme_button">Show README</button>
<p>
The following elements are<br>
&lt;input type="?"&gt; except textarea<br>
</p>
<fieldset>
<legend><b><u>Text related</u></b></legend>
<section class="table">
<div class="row">
<div class="column_left">type</div>
<div class="column_middle">x-inputmode</div>
<div class="column_right">element</div>
</div>
<div class="row">
<div class="column_left">text</div>
<div class="column_middle"></div>
<div class="column_right"><input type="text"></div>
</div>
<div class="row">
<div class="column_left">&lt;textarea&gt;</div>
<div class="column_middle"></div>
<div class="column_right"><textarea></textarea></div>
</div>
<div class="row">
<div class="column_left">text</div>
<div class="column_middle">latin</div>
<div class="column_right"><input type="text" x-inputmode="latin"></div>
</div>
<div class="row">
<div class="column_left">&lt;textarea&gt;</div>
<div class="column_middle">latin</div>
<div class="column_right"><textarea x-inputmode="latin"></textarea></div>
</div>
<div class="row">
<div class="column_left">text</div>
<div class="column_middle">verbatim</div>
<div class="column_right"><input type="text" x-inputmode="verbatim"></div>
</div>
<div class="row">
<div class="column_left">&lt;textarea&gt;</div>
<div class="column_middle">verbatim</div>
<div class="column_right"><textarea x-inputmode="verbatim"></textarea></div>
</div>
<div class="row">
<div class="column_left">text</div>
<div class="column_middle">latin-prose</div>
<div class="column_right"><input type="text" x-inputmode="latin-prose"></div>
</div>
<div class="row">
<div class="column_left">&lt;textarea&gt;</div>
<div class="column_middle">latin-prose</div>
<div class="column_right"><textarea x-inputmode="latin-prose"></textarea></div>
</div>
<div class="row">
<div class="column_left">text</div>
<div class="column_middle">latin-name</div>
<div class="column_right"><input type="text" x-inputmode="latin-name"></div>
</div>
<div class="row">
<div class="column_left">&lt;textarea&gt;</div>
<div class="column_middle">latin-name</div>
<div class="column_right"><textarea x-inputmode="latin-name"></textarea></div>
</div>
</section>
</fieldset>
<br>
<fieldset>
<legend><b><u>Number related</u></b></legend>
<section class="table">
<div class="row">
<div class="column_left">type</div>
<div class="column_middle">x-inputmode</div>
<div class="column_right">element</div>
</div>
<div class="row">
<div class="column_left">text</div>
<div class="column_middle"></div>
<div class="column_right"><input type="text"></div>
</div>
<div class="row">
<div class="column_left">number</div>
<div class="column_middle"></div>
<div class="column_right"><input type="number"></div>
</div>
<div class="row">
<div class="column_left">password</div>
<div class="column_middle"></div>
<div class="column_right"><input type="password"></div>
</div>
<div class="row">
<div class="column_left">&lt;textarea&gt;</div>
<div class="column_middle"></div>
<div class="column_right"><textarea></textarea></div>
</div>
<div class="row">
<div class="column_left">text</div>
<div class="column_middle">digit</div>
<div class="column_right"><input type="text" x-inputmode="digit"></div>
</div>
<div class="row">
<div class="column_left">number</div>
<div class="column_middle">digit</div>
<div class="column_right"><input type="number" x-inputmode="digit"></div>
</div>
<div class="row">
<div class="column_left">password</div>
<div class="column_middle">digit</div>
<div class="column_right"><input type="password" x-inputmode="digit"></div>
</div>
<div class="row">
<div class="column_left">&lt;textarea&gt;</div>
<div class="column_middle">digit</div>
<div class="column_right"><textarea x-inputmode="digit"></textarea></div>
</div>
<div class="row">
<div class="column_left">text</div>
<div class="column_middle">numeric</div>
<div class="column_right"><input type="text" x-inputmode="numeric"></div>
</div>
<div class="row">
<div class="column_left">number</div>
<div class="column_middle">numeric</div>
<div class="column_right"><input type="number" x-inputmode="numeric"></div>
</div>
<div class="row">
<div class="column_left">password</div>
<div class="column_middle">numeric</div>
<div class="column_right"><input type="password" x-inputmode="numeric"></div>
</div>
<div class="row">
<div class="column_left">&lt;textarea&gt;</div>
<div class="column_middle">numeric</div>
<div class="column_right"><textarea x-inputmode="numeric"></textarea></div>
</div>
</section>
</fieldset>
<fieldset>
<legend><b><u>Others</u></b></legend>
<section class="table">
<div class="row">
<div class="column_left">type</div>
<div class="column_right">element</div>
</div>
<div class="row">
<div class="column_left">text</div>
<div class="column_right"><input type="text" /></div>
</div>
<div class="row">
<div class="column_left">range</div>
<div class="column_right"><input type="range" /></div>
</div>
<div class="row">
<div class="column_left">search</div>
<div class="column_right"><input type="search" /></div>
</div>
<div class="row">
<div class="column_left">tel</div>
<div class="column_right"><input type="tel" /></div>
</div>
<div class="row">
<div class="column_left">url</div>
<div class="column_right"><input type="url" /></div>
</div>
<div class="row">
<div class="column_left">email</div>
<div class="column_right"><input type="email" /></div>
</div>
<div class="row">
<div class="column_left">email(multiple)</div>
<div class="column_right"><input type="email" multiple="multiple"/></div>
</div>
<div class="row">
<div class="column_left">date</div>
<div class="column_right"><input type="date" /></div>
</div>
<div class="row">
<div class="column_left">time</div>
<div class="column_right"><input type="time" /></div>
</div>
<div class="row">
<div class="column_left">datetime</div>
<div class="column_right"><input type="datetime" /></div>
</div>
<div class="row">
<div class="column_left">datetime-local</div>
<div class="column_right"><input type="datetime-local" /></div>
</div>
</section>
</fieldset>
<p></p>
<div>Contenteditable:
<p contenteditable="true">Edit me, <b>please</b>!<br />Second line
<span class="hidden">Hidden text</span>
</p>
</div>
<div>iFrame with designmode on:
<iframe id="iframe-designmode"></iframe>
</div>
<div>iFrame with body contenteditable:
<iframe id="iframe-contenteditable"></iframe>
</div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>new Notification() test</title>
<script defer src="../../js/UI/newnotification.js"></script>
<link rel="stylesheet" type="text/css" href="/shared/style/buttons.css">
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
</head>
<body>
<fieldset>
<legend>Call on mozbrowser frame:</legend>
<section>
<button id="button1">Notification</button>
<button id="button2">Notification<br>(10 sec delay)</button>
<button id="button3">5 Notifications<br>(10 sec delay)</button>
</section>
</fieldset>
<br>
<fieldset>
<legend>Call on this iframe within mozbrowser:</legend>
<section>
<button id="button4">Notification</button>
<button id="button5">Notification<br>(10 sec delay)</button>
<button id="button6">5 Notifications<br>(10 sec delay)</button>
</section>
</fieldset>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>mozNotification test</title>
<script defer src="../../js/UI/notification.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
<link rel="stylesheet" type="text/css" href="/shared/style/buttons.css">
</head>
<body>
<fieldset>
<legend>Call on mozbrowser frame:</legend>
<section>
<button id="button1">Notification</button>
<button id="button2">Notification<br>(10 sec delay)</button>
<button id="button3">5 Notifications<br>(10 sec delay)</button>
</section>
</fieldset>
<br>
<fieldset>
<legend>Call on this iframe within mozbrowser:</legend>
<section>
<button id="button4">Notification</button>
<button id="button5">Notification<br>(10 sec delay)</button>
<button id="button6">5 Notifications<br>(10 sec delay)</button>
</section>
</fieldset>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Open test</title>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
<link rel="stylesheet" type="text/css" href="/shared/style/buttons.css">
<script type="text/javascript" src="../../js/UI/window_open.js"></script>
</head>
<body>
<fieldset>
<legend>Call on mozbrowser frame</legend>
<section>
<button class="mozbrowser" data-action="open" data-url="./popup.html#dialog">window.open</button>
<button class="mozbrowser" data-action="open" data-url="./popup.html#attention">window.open<br>(url, name, 'attention')</button>
<button class="mozbrowser" data-action="close" >window.close()</button>
</section>
</fieldset>
<br>
<fieldset>
<legend>Call on this iframe within mozbrowser</legend>
<section>
<button data-action="open" data-url="./popup.html#dialog">window.open</button>
<button data-action="open" data-url="./popup.html#attention">window.open<br>(url, name, 'attention')</button>
<button data-action="open" data-url="https://google.com#dialog">Open External URL</button>
</section>
</fieldset>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Popup</title>
<script defer src="../../js/UI/popup.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
<link rel="stylesheet" type="text/css" href="/shared/style/buttons.css">
<link rel="stylesheet" type="text/css" href="/shared/style/input_areas.css">
</head>
<body>
<h1>Hello world!</h1>
<p>I am a popup created from window.open.</p>
<input type="text" value="focus me!" />
<p><button id="open">Open new</button></p>
<p><button id="close">Close</button></p>
</body>
</html>

View file

@ -0,0 +1,587 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Scroll Bars!</title>
<script defer src="../../js/UI/scrollbar.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
</head>
<body>
<p>Each box is 200px width/height, small boxes are 20px.</p>
<p id="report"></p>
<div class="box" id="probe">
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
</div>
<div class="box" dir="rtl">
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
</div>
<div class="box">
<p>iamaverrrrrrryloooooongwordthatwillcausehozscroooollllllbar.</p>
</div>
</body>
</html>

View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Select test</title>
<script defer src="../../js/UI/select.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
</head>
<body>
<fieldset>
<legend>Select</legend>
<section>
<select id="singleSel">
<option value="Mozilla">Mozilla</option>
<option value="B2G">B2G</option>
<option value="Gaia">Gaia</option>
<option value="Gecko">Gecko</option>
<option value="Basecamp">Basecamp</option>
</select>
</section>
</fieldset>
<fieldset>
<legend>Select - more options:</legend>
<section>
<select>
<option value="Mozilla">Mozilla</option>
<option value="B2G">B2G</option>
<option value="Gaia">Gaia</option>
<option value="Gecko">Gecko</option>
<option value="Basecamp">Basecamp</option>
<option value="Mozilla-2">Mozilla-2</option>
<option value="B2G-2">B2G-2</option>
<option value="Gaia-2">Gaia-2</option>
<option value="Gecko-2">Gecko-2</option>
<option value="Basecamp-2">Basecamp-2</option>
</select>
</section>
</fieldset>
<fieldset>
<legend>Select with size=3:</legend>
<section>
<select size="3" id="sizeSel">
<option value="Mozilla">Mozilla</option>
<option value="B2G">B2G</option>
<option value="Gaia">Gaia</option>
<option value="Gecko">Gecko</option>
<option value="Basecamp">Basecamp</option>
</select>
</section>
</fieldset>
<fieldset>
<legend>Multiple Select</legend>
<section>
<select multiple="multiple" id="multiSel">
<option value="Mozilla">Mozilla</option>
<option value="B2G">B2G</option>
<option value="Gaia">Gaia</option>
<option value="Gecko">Gecko</option>
<option value="Basecamp">Basecamp</option>
</select>
</section>
</fieldset>
<fieldset>
<legend>Select with groups</legend>
<section>
<select name="groups" size="6">
<optgroup label="B2G">
<option value="Gonk">Gonk</option>
<option value="Gecko">Gecko</option>
<option value="Gaia">Gaia</option>
</optgroup>
<optgroup label="Devices">
<option value="otoro">Otoro</option>
<option value="hamachi">Hamachi</option>
<option value="flame">Flame</option>
</optgroup>
</select>
</section>
</fieldset>
<fieldset>
<legend>Time</legend>
<section>
<input type="time" placeholder="Time" />
</section>
<section>
<input type="date" placeholder="Date" />
</section>
<section>
<input type="date" placeholder="Time" value="2016-05-20" />
</section>
<section>
<input type="time" placeholder="Time" value="10:14" />
</section>
</fieldset>
</body>
</html>