Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
v + o + d 4
(version: 0)
Comparing performance of:
d vs v vs o
Created:
5 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<style> .modal{transition:.2s; display:block; opacity:1; visibility:visible;} .modal.o{opacity:0; display:block; visibility:visible;} .modal.v{opacity:1; display:block; visibility:hidden;} .modal.d{opacity:1; display:none; visibility:visible;} </style> <div class="row"> <div class="col"> <div class="box"> <div class="box-header"> <div class="box-title">Control Group > Button Group</div> </div> <div class="box-body"> <div class="row"> <div class="col-sm-auto mb-1 mb-sm-0"> <div class="control-group"> <div class="btn-group"> <button class="btn btn-default">A-1</button> <button class="btn btn-default">A-2</button> <button class="btn btn-default">A-3</button> </div> <button class="btn btn-default">B</button> <button class="btn btn-default">C</button> </div> </div> <div class="col-sm-auto mb-1 mb-sm-0"> <div class="control-group"> <button class="btn btn-default">A</button> <div class="btn-group"> <button class="btn btn-default">B-1</button> <button class="btn btn-default">B-2</button> <button class="btn btn-default">B-3</button> </div> <button class="btn btn-default">C</button> </div> </div> <div class="col-sm-auto mb-1 mb-sm-0"> <div class="control-group"> <button class="btn btn-default">A</button> <button class="btn btn-default">B</button> <div class="btn-group"> <button class="btn btn-default">C-1</button> <button class="btn btn-default">C-2</button> <button class="btn btn-default">C-3</button> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal" data-modal="modal1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header bg-red"> <div class="modal-title">Example Modal</div> <div class="modal-tools"> <div class="dropdown"> <button class="btn btn-neutral dropdown-toggle">Options</button> <div class="dropdown-panel"> <a href="#" class="dropdown-item">Addendum Vitae Consectetum</a> <a href="#" class="dropdown-item">Edit</a> <a href="#" class="dropdown-item">Delete</a> </div> </div> <button class="btn btn-neutral modal-closer"> <i class="far fa-times"></i> </button> </div> </div> <div class="modal-body"> <p data-fill="50">Soluta ipsum quoi minuste dolores dictus aliam alias vitatum ducimus debitis atque veniam aut doxolem vitatum quia veritatis veritatis sit recusandae ined minuste lorem reprehenri dolorem lorem desereni corupti reiciendis inde similique repelend cumque ipsum induntis cumque induntis cumque deleniti induntis sepo recusandae distinctio vitae molitia itaque recusani quam magni.</p> </div> <div class="modal-footer"> <button class="btn btn-default modal-closer mr-2">Close</button> <button class="btn btn-primary">Save</button> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="box"> <div class="box-header"> <div class="box-title">Control Group > Button Group</div> </div> <div class="box-body"> <div class="row"> <div class="col-sm-auto mb-1 mb-sm-0"> <div class="control-group"> <div class="btn-group"> <button class="btn btn-default">A-1</button> <button class="btn btn-default">A-2</button> <button class="btn btn-default">A-3</button> </div> <button class="btn btn-default">B</button> <button class="btn btn-default">C</button> </div> </div> <div class="col-sm-auto mb-1 mb-sm-0"> <div class="control-group"> <button class="btn btn-default">A</button> <div class="btn-group"> <button class="btn btn-default">B-1</button> <button class="btn btn-default">B-2</button> <button class="btn btn-default">B-3</button> </div> <button class="btn btn-default">C</button> </div> </div> <div class="col-sm-auto mb-1 mb-sm-0"> <div class="control-group"> <button class="btn btn-default">A</button> <button class="btn btn-default">B</button> <div class="btn-group"> <button class="btn btn-default">C-1</button> <button class="btn btn-default">C-2</button> <button class="btn btn-default">C-3</button> </div> </div> </div> </div> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
Tests:
d
$(".modal").toggleClass("d");
v
$(".modal").toggleClass("v");
o
$(".modal").toggleClass("o");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
d
v
o
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll focus on extracting the HTML code and the test cases from the given string. **HTML Code:** ``` <div class="modal"> <div class="modal-dialog" role="dialog"> <div class="modal-content"> <button class="btn btn-default">A</button> <button class="btn btn-default">B</button> <button class="btn btn-default">C</button> <button class="btn btn-group"> <button class="btn btn-default">B-1</button> <button class="btn btn-default">B-2</button> <button class="btn btn-default">B-3</button> </button> <button class="btn btn-default">C</button> </div> </div> </div> <div class="modal"> <div class="modal-dialog" role="dialog"> <div class="modal-content"> <button class="btn btn-default">A</button> <button class="btn btn-default">B</button> <button class="btn btn-group"> <button class="btn btn-default">C-1</button> <button class="btn btn-default">C-2</button> <button class="btn btn-default">C-3</button> </button> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script> ``` **Test Cases:** ``` [ { "Benchmark Definition": "$(.modal).toggleClass(\"d\");", "Test Name": "d" }, { "Benchmark Definition": "$(.modal).toggleClass(\"v\");", "Test Name": "v" }, { "Benchmark Definition": "$(.modal).toggleClass(\"o\");", "Test Name": "o" } ] ```
Related benchmarks:
visibility vs display 2
v + o + d
v + o + d 2
v + o + d 3
Comments
Confirm delete:
Do you really want to delete benchmark?