43 lines
1.5 KiB
HTML
43 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<!-- Prevent the browser from requesting any favicon. -->
|
|
<link rel="icon" href="data:,">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h2>Styling bindings benchmark</h2>
|
|
<p>
|
|
<select id="scenario-select">
|
|
<!-- *Note*: When adding/removing scenarios, ensure the e2e test is also updated. -->
|
|
<option value="0">(0) [title]="exp" (no styling involved)</option>
|
|
<option value="1">(1) class="foo" (static class)</option>
|
|
<option value="2">(2) class="foo {{exp}}" (class interpolation)</option>
|
|
<option value="3">(3) [class.foo]="boolExp" binding</option>
|
|
<option value="4">(4) class="foo" [class.bar]="boolExp" (mix of static and class. bindings</option>
|
|
<option value="5">(5) class="foo" [ngClass]="{bar: boolExp}" (mix of static class and ngClass binding)</option>
|
|
<option value="6">(6) class="foo" [ngStyle]="{width: 10px}" [style.background-color]="exp" (Sierpinski's triangle)
|
|
</option>
|
|
<option value="7">(7) style="color: red" (static styling)</option>
|
|
</select>
|
|
|
|
<button id="create">create</button>
|
|
<button id="update">update</button>
|
|
<button id="detect_changes">detect changes</button>
|
|
<button id="destroy">destroy</button>
|
|
<button id="profile_update">profile update</button>
|
|
<button id="profile_detect_changes">profile detect changes</button>
|
|
<button id="modify">modify externally</button>
|
|
</p>
|
|
|
|
<div>
|
|
<styling-bindings id="root">Loading...</styling-bindings>
|
|
</div>
|
|
|
|
<!--load location for ts_devserver-->
|
|
<script src="/app_bundle.js"></script>
|
|
</body>
|
|
|
|
</html> |