egroupware_official/api/js/egw_action/test/test_stylesheet_editing.html
milan 5e3c67a5cf converted egw_action from javascript to typescript
classes are now uppercase and in their own files. lowercase classes are deprecated.
Interfaces are now actual interfaces that should be implemented instead of creating and returning an ai Object every time
2023-07-10 16:54:22 +02:00

98 lines
4.2 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="en">
<head>
<title>Stylesheet Test</title>
<script src="js/jquery.js"></script>
<script src="../egw_stylesheet.ts"></script>
<script >
const s = new egwDynStyleSheet();
</script>
</head>
<body>
<h1>Test for dynamically generating stylesheets and stylesheet rules</h1>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<div class="container">1: Style me!</div>
<div class="container2">2: Style me!</div>
<div class="container3">3: Style me!</div>
<button onclick="s.updateRule('.container', 'background-color: blue');">1 Blue</button>
<button onclick="s.updateRule('.container', 'background-color: red');">1 Red</button>
<button onclick="s.updateRule('.container2', 'background-color: blue');">2 Blue</button>
<button onclick="s.updateRule('.container2', 'background-color: red');">2 Red</button>
<button onclick="s.updateRule('.container3', 'background-color: blue');">3 Blue</button>
<button onclick="s.updateRule('.container3', 'background-color: red');">3 Red</button>
<button onclick="s.updateRule('div', 'display: inline; width: 100px; font-family: Arial, Helvetica, sans;');">Div</button>
</body>
</html>