flex
Version:
Implementation CSS layout using pure Reason - powered by css-layout project.
158 lines (143 loc) • 4.91 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>test page</title>
<script src="gentest.js"></script>
<style>
* {
box-sizing: border-box;
}
body {
font-size: 13px;
color: #cccccc;
background-color: #20201B;
padding: 0;
margin: 0;
font-family: Helvetica;
font-size: 14px;
font-weight: 100;
}
button {
border: none;
border-bottom: 4px solid #151510;
background-color: rgb(80, 129, 171);
color: #eeeeee;
border-radius: 1px;
font-weight: bold;
}
div, span {
box-sizing: border-box;
position: relative;
border: 0 solid #777777;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: stretch;
align-content: flex-start;
justify-content: flex-start;
flex-shrink: 0;
}
td {
}
body > * {
position: absolute;
}
#ltr-container > * {
position: absolute;
direction: ltr;
}
#rtl-container > * {
position: absolute;
direction: rtl;
}
</style>
</head>
<body>
<div id='ltr-container'></div>
<div id='rtl-container'></div>
<div style="padding: 30px; border:1px solid transparent; width: 100%; position: absolute; bottom: 15px">
<table style="border-spacing: 0px; width:100%">
<tr style="width:100%">
<td style="width:33%">
<button style="width: 100%; height: 50px;" id="convertBtn">Load test data from HTML</button>
</td>
<td style="width:33%">
<button style="width: 100%; height: 50px;" id="fixedBtn">Copy FixedPoint</button>
</td>
<td style="width:33%">
<button style="width: 100%; height: 50px;" id="floatBtn">Copy FloatingPoint </button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr style="width:100%">
<td colspan=3 style="background-color: #444444; width:100%; padding: 10px; ">
<div style="font-weight: bold; margin-vertical: 3px; ">Test Data:</div>
<div id="testDataViewer" style="font-size: 10px; height: 100px; width: 90%; overflow: scroll; font-family: monospace;" />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.style.position = 'fixed';
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
textArea.style.top = 0;
textArea.style.left = 0;
// textArea.style.width = '2em';
// textArea.style.height = '2em';
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var res = document.execCommand('copy');
console.log('Copied:');
} catch (err) {
console.log('Error copying');
}
document.body.removeChild(textArea);
}
var copyFixedPointTest = document.querySelector('#fixedBtn');
var copyFloatingPointTest = document.querySelector('#floatBtn');
var convert = document.querySelector('#convertBtn');
copyFixedPointTest.addEventListener('click', function(event) {
try {
copyTextToClipboard(window.fixedPointTest);
} catch(e) {
alert("error: debug this");
throw e;
}
});
copyFloatingPointTest.addEventListener('click', function(event) {
try {
copyTextToClipboard(window.floatingPointTest);
} catch(e) {
alert("error: debug this");
throw e;
}
});
convert.addEventListener('click', function(event) {
try {
window.testData = window.legacyMarkupToJson(prompt("Enter a valid chunk of HTML", "<div id='testName' style='top:0px;left:0px'></div>"));
document.body.children[0].innerHTML = (window.generateMarkup(window.testData, 'ltr', true));
document.body.children[1].innerHTML = (window.generateMarkup(window.testData, 'rtl', false));
window.fixedPointTest = window.printTest(window.testData, false, document.body.children[0], document.body.children[1]);
window.floatingPointTest = window.printTest(window.testData, true, document.body.children[0], document.body.children[1]);
document.getElementById('testDataViewer').innerHTML = JSON.stringify(window.testData);
} catch(e) {
alert("error: debug this");
throw e;
}
});
</script>
</body>
</html>